Chrome Geliştirici Araçları'na giriş, 1. bölüm

Giriş

Zengin ve güçlü bir web tarayıcısı olan Google Chrome, web'deki uygulamalar için olanaklara öncülük eder. Google, son kullanıcılara çok hızlı, çok istikrarlı ve zengin özelliklere sahip bir göz atma deneyimi sunmak için çok çalıştı. Google, sizin gibi geliştiricilerin Chrome'da mükemmel bir deneyim yaşamalarını da sağlar. Chrome ve Safari'de paket halinde sunulan ve kullanıma sunulan Geliştirici Araçları, web geliştiricilerinin ve programcıların tarayıcının ve kendi web uygulamasının iç özelliklerine ayrıntılı olarak erişmelerini sağlar.

Geliştirici Araçları, açık kaynak Webkit projesinin bir parçasıdır. Bu makaledeki tartışmanın çoğu hem Google Chrome hem de Safari için geçerlidir. Ancak ekran görüntüleri Google Chrome 6 kullanılarak alındığından tarayıcınızda küçük farklılıklar olabilir.

Bu makalede, Geliştirici Araçları'na genel bir bakış turuna katılarak en popüler ve faydalı özelliklerine değineceğiz. Hedef kitlemiz, Geliştirici Araçları'nı bilmeyen veya henüz incelememiş olan web geliştiricileridir. Ancak, deneyimli bir web geliştiricisi olsanız bile birkaç ipucu alacağınızdan eminiz.

Geliştirici Araçları örneğiniz bu makalede bulunan ekran görüntüleriyle tam olarak uyuşmuyorsa 5'e yükseltmenizi öneririz. Böylece, devam edip burada açıklanan tüm özelliklere erişebilirsiniz.

Genel bakış

Geliştirici Araçları'nı görüntülemek için kullanabileceğiniz sekiz ana araç grubu vardır ve özellikler her sürümde genişletilmektedir. Chrome 5'te artık Öğeler, Kaynaklar, Komut Dosyaları, Zaman Çizelgesi, Profiller, Depolama Alanı, Denetimler ve Konsol sunulmaktadır.

Öğeler

Öğeler sekmesi.
Öğeler sekmesi

Öğeler aracı, web sayfasını tarayıcının gördüğü gibi görmenize olanak tanır. Yani, Öğeler aracını kullanarak ham HTML'yi, ham CSS stillerini ve Belge Nesne Modeli'ni görebilir ve bunların her birini gerçek zamanlı olarak değiştirebilirsiniz.

Kaynaklar

Kaynaklar sekmesi.
Kaynaklar sekmesi

Web sayfanızın veya uygulamanızın web sunucularından hangi bileşenleri istediğini, bu isteklerin ne kadar sürdüğünü ve ne kadar bant genişliği gerektiğini öğrenmek için Kaynaklar aracını kullanın. Ayrıca, kaynaklarınızın her birinin HTTP istek ve yanıt başlıklarını da görüntüleyebilirsiniz. Kaynaklar aracı, sayfa yüklenme sürelerini hızlandırmaya yardımcı olmak için mükemmeldir.

Komut Dosyaları

Komut Dosyaları sekmesi.
Komut Dosyaları sekmesi

Bir sayfanın JavaScript'ini eşlemek için Komut Dosyaları aracını kullanırsınız. Burada, sayfa için gereken komut dosyalarının listesini ve tam özellikli bir komut dosyası hata ayıklayıcısını bulabilirsiniz. Hatta JavaScript'i anında değiştirebilirsiniz!

Zaman Çizelgesi

Zaman çizelgesi sekmesi.
Zaman Çizelgesi sekmesi

Zaman Çizelgesi aracı, gelişmiş zamanlama ve hız analizi için Chrome'daki çeşitli kamera arkası etkinliklerini ayrıntılı olarak görmenizi sağlar. Tarayıcının DOM etkinliklerini işlemesini, sayfa düzenlerini oluşturmasını ve pencereyi boyamasını ne kadar sürdüğünü öğrenebilirsiniz.

Profiller

Performans sekmesi
Performans sekmesi

Profiller aracı, JavaScript komut dosyalarının performansını yakalamanıza ve analiz etmenize yardımcı olur. Örneğin, hangi işlevlerin yürütülmesi en çok zaman aldığını öğrenebilir ve tam olarak nereye optimizasyon yapacağınıza odaklanabilirsiniz.

Depolama

Depolama alanı sekmesi.
Depolama alanı sekmesi

Modern web uygulamaları, çerezlerden daha fazla kalıcılık gerektirir. Storage aracı ise yerel tarayıcı depolama alanını izlemenize, sorgulamanıza ve hata ayıklamanıza yardımcı olur. Bu araç yerel veritabanlarında, yerel depolamada, oturum depolamada ve çerezlerde depolanan verileri görüntüleyebilir ve sorgulayabilir.

Denetim

Denetim sekmesi
Denetim sekmesi

Denetim aracı, yanınıza kendi web optimizasyonu danışmanınızın gelmesi gibidir. Bu araç, bir sayfayı yüklenirken analiz edebilir ve sayfa yüklenme süresini kısaltmak ve algılanan (ve gerçek) yanıtlama düzeyini artırmak için öneriler ve optimizasyonlar sağlayabilir.

Konsol

Konsol sekmesi.
Konsol sekmesi

Son olarak, Geliştirici Araçları'nın eksiksiz bir Konsol sunar. Konsoldan rastgele JavaScript girebilir ve sayfanızla programlı bir şekilde etkileşim kurabilirsiniz.

Başlatılıyor

Chrome'un içindeyken Geliştirici Araçları'nı kolayca başlatabilirsiniz.

Herhangi bir işletim sisteminde, sayfadaki herhangi bir öğeyi sağ tıklayıp içerik menüsünden "Öğeyi İncele" seçeneğini belirleyebilirsiniz. Bu, Geliştirici Araçları'nı açar ve tıkladığınız öğeyi ayrıntılı bir şekilde inceler.

Bu uygulamanın işleyiş şeklini görmek için Chrome Tarayıcıda http://www.google.com adresini ziyaret edin. Google logosunu sağ tıkladığınızda aşağıdaki seçenekleri görürsünüz:

Denetleyici açılıyor.
Denetleyiciyi açma

"Öğeyi İncele"yi seçtiğinizde Geliştirici Araçları açılır ve şu şekilde görünür:

Öğe inceleyicinin içi.
Öğe inceleyicinin içi

Geliştirici Araçları'nın Öğeler sekmesinde nasıl açıldığına ve Google logosu için <img> etiketinin otomatik olarak ayrıntısına inip vurgulandığına dikkat edin. Belirli bir sayfa öğesini hangi HTML'nin oluşturduğunu merak ediyorsanız bu yöntem oldukça kullanışlıdır.

Geliştirici Araçları'nı basit bir klavye kısayoluyla da açabilirsiniz. İşletim sisteminize bağlı olarak aşağıdakileri deneyin:

  • Windows ve Linux'ta Control-Shift-J tuşlarını seçin.
  • Mac'te Command-Option-J tuşlarını seçin.

Son olarak, araçları ana tarayıcı menüsünden açmayı seçebilirsiniz.

Mac'te, ana uygulama menü çubuğundan Görünüm, Geliştirici, Geliştirici Araçları'nı seçin.

Mac&#39;te Geliştirici Araçları açılıyor.
Mac'te Geliştirici Araçları'nı açma

Windows PC'de sağ üstteki Sayfa menüsünü kullanıp Geliştirici Araçları'nı seçin.

Windows&#39;da Geliştirici Araçları açılıyor.
Windows'da Geliştirici Araçları'nı açma

Geliştirici Araçlarınız açık ve hazır olduğuna göre, Google'ın ana sayfasındaki öğeleri inceleyerek başlayalım.

Öğeler

Öğeler sekmesini seçmek.
Öğeler sekmesini seçme

Geliştirici Araçları'ndaki ilk sekme Öğeler'dir. Bu, tarayıcınızın gördüğü şekilde sunulan, web sayfasının yapısına açılan pencerenizdir.

DOM Göz Atma

Sayfanın bir kısmı için HTML snippet'ini tanımlamanız gerektiğinde genellikle Öğeler sekmelerini ziyaret edersiniz. Örneğin, bir resmin HTML kimliği özelliğinin olup olmadığını ve bu özelliğin değerinin ne olduğunu merak ediyor olabilirsiniz.

Öğeler sekmesi bazen bir sayfanın "kaynağı görüntülemenin" daha iyi bir yoludur. Elements (Öğeler) sekmesinde, sayfanın DOM'si iyi bir şekilde biçimlendirilerek HTML öğelerini, üst öğelerini ve alt öğelerini kolayca gösterir. Ziyaret ettiğiniz sayfaların çoğu zaman küçültülmüş veya yalnızca çirkin HTML'ye sahip olması, sayfanın nasıl yapılandırıldığını görmeyi zorlaştırır. Öğeler sekmesi, sayfanın gerçek temel yapısını görüntülemek için kullanabileceğiniz çözümdür.

Örneğin, aşağıda Google ana sayfasının "kaynağı görüntüle"den alınan çıktı gösterilmektedir.

Google.com&#39;un küçültülmüş kaynağı.
Google.com'un küçültülmüş kaynağı

Yukarıdaki kaynak, optimize edilmiş ve küçültülmüş olduğu için okunması zor. Bu biçim, istemciler ve sunucular için iyi ancak geliştiriciler için zor.

Bunun yerine, bir sayfanın kaynağını okumak istediğinizde Öğeler Sekmesi'ni kullanarak okunaklı ve söz diziminin vurgulandığı öğe hiyerarşisini görüntüleyebilirsiniz.

Öğe denetleyicisi güzel yazıcı HTML&#39;sidir.
The Elements denetleyicisi güzel yazıcı HTML'i

Öğeler sekmesi, sayfadaki herhangi bir öğe için Stiller'e, Metriklere, Özelliklere ve Etkinlik İşleyicilere göz atmanıza, bunlarla etkileşime geçmenize ve hatta bazen bunları değiştirmenize olanak sağlar.

Stille Göz Atma

CSS'nin basamaklı yapısı, Öğeler sekmesindeki Stiller tarayıcısını çok kullanışlı hale getirir. Bazen stiller kendi üzerine daralır ve istenmeyen görseller görünür. Tarayıcının öğeye hangi stil kuralını uyguladığını bilmek, böyle bir sorunda hata ayıklamanıza yardımcı olur.

Öğeler sekmesindeki herhangi bir öğeyi tıkladığınızda, söz konusu öğeye ekli tüm stiller görüntülenir.

İnceleyicideki CSS stili.
İnceleyicide CSS stili

Yukarıdaki ekran görüntüsünde, uygulanmakta olan tüm stil özelliklerini ayırt edebildiğimizi görürsünüz. Örneğin, dolgu doğrudan <img> öğesinin stil özelliğinden gelir. Bununla birlikte, genişlik ve yükseklik ilgili yerel özelliklerden gelir. İlginç bir şekilde, <center> etiketi, <body> etiketi ve diğerlerinden devralınan stiller olduğunu görebilirsiniz.

Stilleri ayrı ayrı görmek ve bunların nereden geldiğini görmek güzel olsa da, hesaplandıktan ve öğeye uygulandıktan sonra nihai stil grubunu görmek de çok yararlıdır. Aşağıdaki ekran görüntüsünde gösterildiği gibi Hesaplanan Stil menüsünü seçerek nihai ürünü görebilirsiniz.

Tarayıcı tarafından hesaplanan stiller de gösterilir.
Tarayıcı tarafından hesaplanan stiller de gösterilir.

Daha sonra, Öğeler sekmesinin sağladığı diğer özelliklere kısaca göz atacağız. Sonraki makalelerde aşağıdakileri daha ayrıntılı olarak ele alacağız.

Kutu Modeli

Kutu modelini, Metrikler menüsünü seçerek seçili öğeye uygulandığı şekliyle görebilirsiniz:

Bir öğenin kutu modelini görüntüleme.
Bir öğenin kutu modelini görüntüleme

Öğe Özellikleri

Özellikler menüsünü seçerek öğenin tüm özelliklerini, JavaScript ve DOM'nin göreceği şekilde görebilirsiniz:

DOM Öğesi özellikleri görüntüleniyor.
DOM Öğesi özelliklerini görüntüleme.

Etkinlik İşleyiciler

Son olarak, Etkinlik İşleyicileri menüsünden öğeye eklenmiş veya öğeye geçiş yapan etkinlik işleyicileri bile görebilirsiniz:

DOM Öğesi etkinlik işleyicilerini görüntüleme.
DOM Öğesi etkinlik işleyicilerini görüntüleme.

Özet

Öğeler sekmesinde pek çok işlev mevcuttur ve gelecekteki makalelerde menüler daha ayrıntılı olarak ele alınacaktır.

Sayfanın tarayıcının kendisine nasıl göründüğünü görmek istediğinizde Öğeler sekmesini kullanmalısınız. "Bu stil nasıl hesaplanıyor?" veya "Bu bileşeni hangi HTML etiketleri oluşturdu?" gibi yaygın sorunlar, Öğeler Sekmesi üzerinden hızla ve kolayca yanıtlanır.

Öğeler sekmesini bir uber "görüntüleme kaynağı" gibi düşünün ve sayfanızla ilgili son derece keskin bir görünürlük elde edin.

Sayfayı inceledikten sonra, ilk başta HTML, CSS ve resimlerin bu bölüme nasıl geldiğini merak ediyor olabilirsiniz. Bir sonraki adımda açıklanan Kaynaklar Sekmesi, istemci tarayıcısının ve web sunucusunun bu kaynakları göndermek için nasıl iletişim kurduğunu gösterir.

Kaynaklar

Uygulamanız çalışmaya başladıktan sonra, sıradaki adımınız ağ ve bant genişliği performansını optimize etmek olmalıdır. Uygulamanızın sunucudan istemciye aktarılmasını mümkün olduğunca hızlı ve verimli bir şekilde gerçekleştirmeyi hedeflemelisiniz. Kullanıcılarınız hızlı sayfa yüklemeleri için teşekkür eder, bant genişliğinden ve sunucu kaynaklarından tasarruf edersiniz ve siz de Google'ın arama sonucu sıralamalarında daha iyi puan alırsınız (bunun için site hızını da hesaba katarsınız).

Geliştirici Araçları'ndaki Kaynaklar sekmesi, web sunucusu ile istemci tarayıcısı arasındaki iletişime açılan pencerenizdir. Tarayıcı tarafından istenen tüm kaynakları (bu her zaman şaşırtıcıdır!), bunları sunucudan almak için gereken süreyi ve aktarım sırasında ne kadar bant genişliği kullanıldığını görebilirsiniz.

Ancak Kaynaklar Sekmesinin çalıştırılması sayfa yükleme performansını etkilediğinden varsayılan olarak devre dışıdır. Bu işleve ilk kez eriştiğinizde, görüntülediğiniz sayfa için özelliği etkinleştirmeniz gerekir.

Kaynak takibi etkinleştiriliyor.
Kaynak takibini etkinleştirme.

Gereksiz şekilde küçük bir performans cezası uygulamak istemediğinizden, varsayılan "Yalnızca bu oturum için etkinleştir" seçeneğini seçili bırakmanızı öneririz. "Kaynak izlemeyi etkinleştir"i tıkladığınızda sayfa yeniden yüklenir ve Geliştirici Araçları, sunucudan gönderilen kaynakları izler ve görüntüler.

Aşağıdaki ekran görüntüsünde, Google ana sayfası için gerekli ve yüklenen kaynaklar gösterilmektedir.

Google.com&#39;un kaynak izleme aracı.
Google.com'un kaynak izleme süreci.

Bu ekranda çok fazla bilgi var. O halde bunu parça parça inceleyelim.

Varsayılan davranış, sayfaya ilişkin tüm kaynakları istemenin ve yüklemenin ne kadar sürdüğünü göstermektir. İstemcinin kaç bireysel talepte bulunduğunu bilmiyor olabileceğinizden Kaynaklar listesini aşağı kaydırmak sizi şaşırtabilir. İstemciden gelen çok sayıda istek, performansı ciddi şekilde etkileyebilir. Tam olarak ne istendiği konusunda görünürlük elde etmek, optimizasyonun ve nihai olarak kaynakların azaltılmasının ilk adımıdır.

Yalnızca resimler veya stil sayfalarıyla ilgileniyorsanız, doğrudan ana sekme penceresinin altındaki menüyü kullanarak kaynak türünü filtreleyebilirsiniz.

Yalnızca görsel kaynakları görüntüleniyor.
Yalnızca görsel kaynaklarını görüntüleme.

Ayrıca kaynakların hangi sırayla istendiğini de öğreneceksiniz. Zaman çizelgesi görünümünü kullanarak, sayfanızdaki belirli öğelerin neden diğerlerine göre daha sonra gösterildiğini daha iyi anlayabilirsiniz.

İstenen tüm kaynaklar ve bunların istek zaman çizelgesinin tamamını nasıl oluşturdukları hakkında genel bir fikir edindikten sonra kaynakları tek tek inceleyebilirsiniz.

Sayfaya her eriştiğinizde bazı kaynakların istendiğini fark ederseniz bu, önbelleğe alma başlıklarınızın doğru bir şekilde yapılandırılmadığını gösterir. Soldaki listede bulunan kaynağı tıklayarak bir kaynağa ait tüm üstbilgileri görüntüleyebilirsiniz.

İstek başlıklarını görüntüleme.
İstek başlıklarını görüntüleme.

Beklenen HTTP Yanıt Kodunun ayarlandığından ve uygun üstbilgilerin sağlandığından emin olmak için Üstbilgiler görüntüsünü kullanın. Örneğin, kaynak çok seyrekse veya hiç değiştirilmediyse, sunucunuz çok ileri tarihli bir Geçerlilik sonu üstbilgisi ayarlamalıdır. Bu işlem, tarayıcıya söz konusu tarihe kadar kaynağın tekrar istenmemesi gerektiğini bildirir. Bu, sayfanız için gereken HTTP bağlantısı miktarını azaltarak sitenizi hızlandırır.

Özet

Kaynaklar sekmesinde çok daha fazla şey bulunur. Bu konuları gelecekteki bir makalede ele alacağız.

İstemci tarayıcınızın web sunucusuyla nasıl iletişim kurduğunu görmek için Kaynaklar Sekmesi'ni kullanın. İstek zamanı, istek boyutu ve istek sırası gibi bu bilgileri kullanarak sunucu yükünü ve maliyetleri azaltmanın yanı sıra hızı artırıp kullanıcı deneyimini iyileştirmek için akıllı optimizasyonlar yapabilirsiniz.

Hız; web siteniz, kullanıcılarınız ve arama motorları için çok önemlidir. Kaynaklarınızın sayısı ve boyutu küçültüldükten ve uygun HTTP iletimleri gerçekleştiğinde bir sonraki adım sayfanızda çalışan komut dosyalarını araştırmak ve optimize etmektir. Neyse ki, bir sonraki adımda ele aldığımız Komut Dosyaları sekmesi tam da bunu sağlıyor.

Ek Kaynaklar

Geliştirici Araçları hakkında daha fazla bilgi için aşağıdakileri önerebiliriz:

Elbette diğer birçok harika HTML5 ve Chrome içeriğinin yanı sıra bu makalenin 2. Bölümü için html5rocks.com adresini ziyaret etmeye devam edin.