Google'ın Web Araçları için bir rehber

Jan 24, 2026
Nasıl Yapılır

Big G, aka Google, geliştiricilere web tasarımını kolaylaştırmaya yönelik bir alet bolluğu sağlar. Bu yazıda, orada en iyi Google araçlarından bazılarını aradık ve size web tasarım ve geliştirme iş akışında nasıl kullanacağınızı gösteriyoruz.

Farklı bir dizi kapsıyoruz Web Tasarım Araçları Burada, içeriği gezinmeyi kolaylaştırmak için içeriği sayfalara bölerdik. İlgilendiğiniz bölüme atlamak için yukarıdaki açılır menüyü kullanın. Farklı bir sağlayıcı kullanarak bir site tasarlamak ister misiniz? Rehberlerimiz ağ sağlayıcısı ve üst Web Sitesi Oluşturucu Kapsandın mı?

Web siteleri belirlendikçe, içerikleri herkes tarafından görülebilir. Chrome'un DevTools bu basit hale getirir - bu sayfada, HTML, CSS ve JavaScript'i nasıl görüntüleneceğinizi ve değiştireceğinizi gösteririz. Açık sayfa 2 , Google'ın hata ayıklayıcısını, kodlama hatalarını hızlı ve kolay bir şekilde düzeltmek için nasıl kullanacağınıza daha yakından bakıyoruz. Sayfa 3 Sayfalarınızın mobil sürümlerini masaüstü makineniz üzerinden test etmek için kullanabileceğiniz Google'ın cihaz moduna spot ışığını koyar. Açık Sayfa 4 Tasarımlarınızda malzeme tasarım ilkelerini uygulamaya başlamaya başlamanın farkında olması gereken temelleri tanıtıyoruz. En sonunda, Sayfa 5 Web tasarım endüstrisindeki en son büyük şey, ilerici web uygulamalarına bakar.

HTML, CSS ve AMP'yi görüntüleyin ve değiştirin; Js

Bir web sitesinin kodu Minyal olmadığı sürece, Chrome'un geliştirici araçlarını kullanan herkes tarafından görülebilir. Her şeyden önce, Chrome sürümünü kontrol edin - 64 bitli bir Ubuntu iş istasyonunda çalışan 70.0.3538.67 sürümünde aşağıdaki adımlar çalışır. Sonra, Hamburger menüsünü açın ve Diğer Araçlar ve GT; Geliştirici araçları.

Launch Google's Developer Tools

Geliştirici araçlarını başlatın ve buna benzer bir ekran görmelisiniz [en üstündeki simgeye tıklayın]

Tarayıcı, ekranınızın sol tarafında bir bölme açarak yanıt verir. İlk adımda yeniden boyutlandırılmalıdır - Varsayılan olarak, tarayıcı yeterli ekran gayrimenkul vermez. Tamamlandığında, ekran yukarıdaki resimde gösterilene benzer görünüyor.

Varsayılan olarak, geliştirici araçları yüklenen konsol sekmesiyle başlar. Konsol kayıt fonksiyonunun çağrılmasıyla yayılan çıktıyı içerir. Render hataları da orada görünür - kırmızı çizgiler bulursanız, bir şey işaretlemede ya da sayfanızın kodunda yanlıştır. Sağ taraftaki küçük 'URL' tıklamasını, mesajın ortaya çıkmasına neden olan çizgiye getirir.

İşaretlemeyi inceleyin

Faiziniz işaretlemeye odaklanırsa, Şekilde gösterilen öğeler sekmesini kullanın. Tarayıcının şu anda sunduğu işaretleyiciyi gösterir. Duyusal aşırı yüklenmeyi önlemek için bir ağaç görüntüsüne benzer bir şekilde bir şekilde genişletebilir ve kompakt yapabilirsiniz.

varoluş nedeni Sekme, CSS yapısının görüntüsüdür. Widget'lar, çeşitli kaynaklardan CSS'yi topla ve birbirlerinin yanında gösteriliyor. Şekilde gösterilen örnek söz konusu olduğunda, stillerin hem 'Div' etiketinden hem de sayfanın 'ana' işaretinden sağlandığını görüyoruz.

Chrome, anında en çok nitelikleri düzenlemenizi sağlar. Etiketi bir editöre dönüştürmek için siyah metinlerden herhangi birine çift tıklayın, ardından yeni istenen değeri girin ve geri dönüş tuşuna basın. Renderör bu değişiklikleri alır ve bunları uçundaki dom'a uygular. Bu, renkleri veya yerleştirme sorunlarını optimize etmeye çalışırken özellikle yararlıdır; Değişiklikleri önizlemek için bir sayfayı yeniden yüklemek zorunda bırakmak zorunda kalır.

Google's web tools

Sarı bir arka plan, pencerenin içeriğinin filtrelemeye tabi olduğunu gösterir [en üstündeki simgeye tıklayın]

Son olarak, panelin üstündeki metin kutusuna bir göz atın. Gösterilen işaretleme öğelerini filtrelemenizi sağlar: Örneğin, bu makalede daha sonra kullanılan malzeme tasarım kitaplığından miras kalan tüm stillere bakış açısını sınırlamak için 'MDC' girin. Bir filtre etkin olduğunda, sarı bir arka plan yukarıda gösterilene benzer bir şekilde görünür.

Detaylı bir analiz yapın

Modern web tarayıcılarında, DOM 'statik' sunum sorunları ile sınırlı değildir. Aynı zamanda olay akışını ve yerleştirilmesini de yönetir. 'Boyutlu' özelliklerinin bir listesini ortaya çıkarmak için hesaplanan sekmeye geçin. Bu, ekrandaki widget'ları tam bir şekilde düzenlerken inanılmaz derecede faydalıdır.

Olay Dinleyicileri sekmesine geçmek, olay akışlarına genel bir bakış sağlar. Bu özelliği, kullanıcı etkileşimi ile ilgili sorunları hızlı bir şekilde incelemek için kullanın: Bir olay tetiklemezse, olay işleyicisi bağlantılarını kontrol ederek başlayın.

Son olarak, Özellikler penceresi, bireysel dom düğümlerinin içinde depolanan niteliklere bir göz atmanıza olanak sağlar. DOM-manipüle kodunu avlamak için çok fazla zaman geçirdiyseniz, değer açıktır.

Sonraki Sayfa: Google'ın hata ayıklayıcısı nasıl kullanılır?

  • 1
  • 2
  • 3
  • 4
  • 5

Geçerli sayfa: HTML, CSS ve AMP'yi görüntüleyin ve değiştirin; Js

Nasıl Yapılır - En Popüler Makaleler

Google'da Nasıl Değil

Nasıl Yapılır Jan 24, 2026

(Resim Kredisi: BuzzFeed) Böylece, Google'da nasıl sıralanacağını bilmek istiyorsunuz. İyi haber şu ki, herke..

Kaslar nasıl çizilir

Nasıl Yapılır Jan 24, 2026

Hareket halinde kasları nasıl çizileceğini bilmek, hareketsiz bir görüntüye akışkanlık ve hareket ekleyecektir. Bu eği..

Photoshop CC'de bir fotoğraf kolajı nasıl yapılır

Nasıl Yapılır Jan 24, 2026

Photoshop'ta fotoğraf kolajının nasıl yapıldığını öğrenme birçok farklı durumlarda kullanışlı olacaktır. Bireysel fotoğraflar zaman içinde bekar anlar yakalar, ancak bir ko..

Photoshop'taki dokuların nasıl kullanılacağı

Nasıl Yapılır Jan 24, 2026

Doku genellikle geleneksel ve dijital sanat eserleri arasındaki çizgileri bulanıklaştırır. Genellikle, dijital sanatınızın arkasında herhangi bir tuvali yoksa, ikisi arasındaki far..

Beş dakikanın altında bir rakam çizin

Nasıl Yapılır Jan 24, 2026

Beş dakikalık bir poz eskiz etmek çok eğlencelidir çünkü pozun güçlü bir anlamını yakalamak için yeterli zaman sunar, ancak çizimin fazla çalışması (veya fazla düşünmeye)..

3D çalışmanızı kubbe ışıkları ile aydınlatın

Nasıl Yapılır Jan 24, 2026

Dome ışıklarının kullanımı, son on yılda CGI yaratımındaki en büyük ilerlemelerden biri olmuştur. Hesaplamalı olara..

3D Fan Sanatı Usta Nasıl Yapılır

Nasıl Yapılır Jan 24, 2026

TV dizisinin ilk sezonunu izledikten sonra, kendimi yapmam gerektiğini biliyordum. 3d sanat Daredevil karakterini..

Adobe XD'de prototipleme ile başlayın

Nasıl Yapılır Jan 24, 2026

UX tasarım uzmanlarına olan talebin büyümeye devam ettiği için tasarımcılar, yüksek kaliteli prototipler oluşturacak kadar güçlü olan kullanımı kolay araçlar arıyorlar, ancak..

Kategoriler