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

Giriş

Google Chrome, web'deki uygulamalarda neler yapılabileceğinin öncüsü olan zengin ve güçlü bir web tarayıcısıdır. Google, son kullanıcılara çok hızlı, çok kararlı ve zengin özelliklere sahip bir tarama deneyimi sunmak için yoğun bir şekilde çalıştı. Google, sizin gibi geliştiricilerin Chrome'da mükemmel bir deneyim yaşamasını da sağlar. Chrome ve Safari'de bulunan Geliştirici Araçları, web geliştiricilerinin ve programcıların, tarayıcının ve kendi web uygulamalarının iç özelliklerine ayrıntılı olarak erişebilmesini sağlar.

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

Bu makalede, Geliştirici Araçları'na genel bir bakış atacak ve en popüler ve faydalı özelliklerine dikkat çekeceğiz. Hedef kitlemiz, Geliştirici Araçları'nı bilmeyen veya henüz incelememiş web geliştiricileridir. Ancak deneyimli bir web geliştiricisi olsanız bile bir iki ipucu edineceğinizden eminiz.

Geliştirici Araçları örneğiniz bu makaledeki ekran görüntüleriyle tam olarak eşleşmiyorsa burada açıklanan tüm özelliklere erişebilmek ve bu makaleyi takip edebilmek için 5'e yükseltmenizi öneririz.

Genel Bakış

Geliştirici Araçları'nda toplam sekiz ana araç grubu bulunur ve her sürümde bu araçların özellikleri genişletilir. Chrome 5'te artık Öğeler, Kaynaklar, Komut Dosyaları, Zaman Çizelgesi, Profiller, Depolama, Denetimler ve Konsolda yer alıyor.

Öğeler

Öğeler aracı, web sayfasını tarayıcının gördüğü gibi görmenizi sağlar. Yani Öğeler aracını kullanarak ham HTML'yi, ham CSS stillerini ve Belge Nesnesi Modeli'ni görebilir ve bu öğeleri gerçek zamanlı olarak değiştirebilirsiniz.

Kaynaklar

Web sayfanızı 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, her kaynağınızın HTTP istek ve yanıt başlıklarını da görüntüleyebilirsiniz. Kaynaklar aracı, sayfa yüklenme sürelerini kısaltmanıza yardımcı olacak mükemmel bir araçtır.

Komut Dosyaları

Bir sayfanın JavaScript'ine göz atmak için Komut Dosyaları aracını kullanırsınız. Burada, sayfanın gerektirdiği komut dosyalarının listesini ve tam özellikli bir komut dosyası hata ayıklayıcısını bulabilirsiniz. JavaScript'i anında değiştirebilirsiniz.

Zaman çizelgesi

Zaman çizelgesi aracı, gelişmiş zamanlama ve hız analizi için Chrome'un perde arkasındaki çeşitli etkinlikleri ayrıntılı olarak görmenizi sağlar. Tarayıcının DOM etkinliklerini işlemesi, sayfa düzenlerini oluşturması ve pencereyi boyaması ne kadar sürer?

Profiller

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ülmesinin en uzun sürdüğünü öğrenebilir ve tam olarak nerede optimizasyon yapılacağını belirleyebilirsiniz.

Depolama

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

Denetim

Denetleme aracı, yanınızda kendi web optimizasyon danışmanınız varmış 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ğlar.

Konsol

Son olarak, geliştirici araçları tam özellikli bir konsol sunar. Konsoldan istediğiniz JavaScript'i girebilir ve sayfanızla programatik olarak etkileşim kurabilirsiniz.

Başlangıç

Chrome'dayken Geliştirici Araçları'nı başlatmak kolaydır.

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 işlem, Geliştirici Araçları'nı açar ve tıkladığınız öğeye doğrudan gider.

Bu özelliğin nasıl çalıştığını 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:

"Öğeyi İncele"yi seçtiğinizde Geliştirici Araçları açılır. Bu araç aşağıdaki gibi görünür:

Geliştirici Araçları'nın Öğeler sekmesinde nasıl açıldığını ve Google logosunun <img> etiketine otomatik olarak nasıl indiğini ve bu etiketi nasıl vurguladığını fark edin. Bu, belirli bir sayfa öğesini hangi HTML'nin oluşturduğunu merak ettiğinizde çok faydalı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, ana tarayıcı menüsünden araçları açmayı da seçebilirsiniz.

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

Windows PC'de sağ üstteki Sayfa menüsünü kullanarak Geliştirici, Geliştirici Araçları'nı seçmeniz gerekir.

Geliştirici Araçları'nı açıp hazır hale getirdiniz. Şimdi Google'ın ana sayfasındaki öğeleri keşfetmeye başlayalım.

Öğeler

Geliştirici Araçları'ndaki ilk sekme Öğeler'dir. Bu, web sayfasının yapısına baktığınızda gördüğünüz penceredir.

DOM Tarama

Sayfanın bir yönü için HTML snippet'ini tanımlamanız gerektiğinde Öğeler sekmelerini sık sık ziyaret edersiniz. Örneğin, bir resmin HTML kimlik özelliği olup olmadığını ve bu özelliğin değerini öğrenmek isteyebilirsiniz.

Öğeler sekmesi, bazen bir sayfanın "kaynağını görüntülemek" için daha iyi bir yoldur. Öğeler sekmesinde, sayfanın DOM'u güzel bir şekilde biçimlendirilir ve HTML öğelerini, bunların atalarını ve alt öğelerini kolayca gösterir. Ziyaret ettiğiniz sayfalarda sıklıkla sıkıştırılmış veya çirkin HTML'ler bulunur. Bu da sayfanın nasıl yapılandırıldığını görmeyi zorlaştırır. Öğeler sekmesi, sayfanın temelindeki gerçek yapıyı görüntülemenize olanak tanır.

Örneğin, aşağıdaki çıkış, Google ana sayfasının "kaynağı göster" seçeneğiyle elde edilen sonuçtur.

Yukarıdaki kaynak, optimize edildiği ve küçültüldüğü için okunması zordur. Bu biçim, istemciler ve sunucular için iyi ancak geliştiriciler için zordur.

Bunun yerine, bir sayfanın kaynağını okumak istediğinizde, güzel bir şekilde basılmış ve söz dizimi vurgulanmış bir öğe hiyerarşisini görüntülemek için Öğeler sekmesini kullanın.

Öğeler sekmesi, sayfadaki herhangi bir öğenin Stillerine, Metriklerine, Özelliklerine ve Etkinlik Dinleyicilerine göz atmanıza, bunlarla etkileşime geçmenize ve hatta bazen bunları değiştirmenize de olanak tanır.

Stillere göz atma

CSS'nin basamaklı yapısı, Öğeler sekmesindeki Stil tarayıcısını çok kullanışlı hale getirir. Bazen stiller kendi üzerine çöker ve istenmeyen görseller görünür. Tarayıcının öğeye hangi stil kuralını uyguladığını bilmek, bu tür bir sorunun hata ayıklamasını yapmanıza yardımcı olur.

Öğeler sekmesindeki herhangi bir öğeyi tıkladığınızda, söz konusu öğeye bağlı tüm stiller gösterilir.

Yukarıdaki ekran görüntüsünde, uygulanan tüm stil özelliklerini görebileceğinizi görebilirsiniz. Örneğin, dolgu doğrudan <img> öğesinin stil özelliğinden gelir. Ancak genişlik ve yükseklik, ilgili doğal özelliklerden alınır. İlginç bir şekilde, <center> etiketinden, <body> etiketinden ve diğerlerinden de devralınan stiller olduğunu görebilirsiniz.

Stillerin tek tek nasıl uygulandığını ve nereden geldiğini görmek harika olsa da, hesaplanıp öğeye uygulandıktan sonra nihai stil grubunu görmek de çok faydalıdır. Aşağıdaki ekran görüntüsünde gösterildiği gibi Hesaplanmış Stil menüsünü seçerek nihai ürünü görebilirsiniz.

Ardından, Öğeler sekmesinin sunduğu diğer özelliklere kısaca göz atacağız. Aşağıdaki konuları gelecekteki makalelerde daha ayrıntılı olarak ele alacağız.

Kutu modeli

Kutu modelini, seçili öğeye uygulandığı şekilde görmek için Metrikler menüsünü seçin:

Öğe Özellikleri

Öğenin tüm özelliklerini, JavaScript ve DOM'un göreceği şekilde görmek için Özellikler menüsünü seçebilirsiniz:

Etkinlik İşleyiciler

Son olarak, Öğe Dinleyicileri menüsünü kullanarak öğeye bağlı veya öğe içinden gelen etkinlik dinleyicilerini bile görebilirsiniz:

Özet

Öğeler sekmesi üzerinden birçok işlev kullanılabilir. Gelecekteki makalelerde, her bir menüye daha ayrıntılı olarak değineceğiz.

Sayfanın tarayıcıda nasıl göründüğünü görmek istediğinizde Öğeler sekmesini kullanmanız gerekir. "Bu stil nasıl hesaplanır?" veya "Bu bileşen hangi HTML etiketleriyle oluşturuldu?" gibi yaygın sorunlar, Öğeler sekmesi aracılığıyla hızlı ve kolay bir şekilde yanıtlanabilir.

Öğeler sekmesini bir "kaynak görüntüleme" aracı olarak düşünün ve sayfanızda çok net bir görünürlük elde edin.

Sayfayı inceledikten sonra HTML, CSS ve resimlerin oraya nasıl geldiğini merak edebilirsiniz. Aşağıda 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, ağ ve bant genişliği performansını optimize etmeniz gerekir. Uygulamanızın sunucudan istemciye aktarımını mümkün olduğunca hızlı ve verimli bir şekilde yapmayı hedeflemeniz gerekir. Kullanıcılarınız sayfaların hızlı yüklenmesi için size teşekkür edecek, bant genişliği ve sunucu kaynaklarından tasarruf edeceksiniz. Ayrıca Google'ın arama sonucu sıralamalarına (artık site hızı da dahil ediliyor) göre daha iyi puan alacaksınız.

Geliştirici Araçları'ndaki Kaynaklar sekmesi, web sunucusu ile istemci tarayıcı arasındaki iletişime göz atmanızı sağlar. Tarayıcının istediği tüm kaynakları (bu her zaman çok şaşırtıcıdır!), bu kaynakların sunucudan alınmasının ne kadar sürdüğünü ve aktarım sırasında ne kadar bant genişliğinin kullanıldığını görebilirsiniz.

İlginç bir şekilde, Kaynaklar sekmesinin çalıştırılması sayfa yükleme performansını etkilediği için varsayılan olarak devre dışıdır. İşleve ilk kez eriştiğinizde, görüntülediğiniz sayfa için etkinleştirmeniz gerekir.

Gereksiz yere küçük bir performans cezası almak istemediğiniz için varsayılan "Yalnızca bu oturum için etkinleştir" seçeneğini etkin durumda 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österir.

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

Bu ekranda çok fazla bilgi var. Bu nedenle, her bir bilgiyi tek tek inceleyelim.

Varsayılan davranış, sayfanın tüm kaynaklarının istenip yüklenmesi için ne kadar sürenin geçtiğini göstermektir. İstemci tarafından kaç ayrı istek gönderildiğini bilmediğiniz için Kaynaklar listesini aşağı kaydırdığınızda şaşırabilirsiniz. İstemciden gelen çok sayıda istek, performansı ciddi şekilde etkileyebilir. Tam olarak nelerin istendiğine dair bilgi edinmek, optimizasyon ve nihayetinde kaynakların azaltılması için ilk adımdı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.

Ayrıca kaynakların hangi sırayla istendiğini de öğrenebilirsiniz. Zaman çizelgesi görüntülemesini kullanarak sayfanızdaki belirli öğelerin neden diğerlerinden daha geç göründüğünü daha iyi anlayabilirsiniz.

İstenen tüm kaynaklara ve bunların istek zaman çizelgesinin tamamını nasıl oluşturduğuna genel bir bakış edindikten sonra kaynakları tek tek incelemek isteyeceksiniz.

Sayfaya her eriştiğinizde bazı kaynakların istendiğini fark ederseniz bu, önbelleğe alma üstbilgilerinizin doğru şekilde yapılandırılmadığı anlamına gelir. Soldaki listede kaynağı tıklayarak kaynağın tüm başlıklarını görüntüleyebilirsiniz.

Beklenen HTTP yanıt kodunun ayarlandığından ve uygun üstbilgilerin sağlandığından emin olmak için Üstbilgi görüntülemesini kullanın. Örneğin, kaynak nadiren veya hiç değiştirilmiyorsa sunucunuz, Expires başlığını çok uzak bir gelecek için ayarlamalıdır. Bu, tarayıcıya kaynağın bu tarihe kadar tekrar istenmemesi gerektiğini bildirir. Bu sayede sayfanız için gereken HTTP bağlantılarının miktarı azalır ve siteniz hızlanır.

Özet

Kaynaklar sekmesinde daha birçok özellik vardır. Bunlara gelecek bir makalede değineceğiz.

İstemci tarayıcınızın web sunucusuyla nasıl iletişim kurduğu hakkında bilgi edinmek için Kaynaklar sekmesini kullanın. İstek zamanı, istek boyutu ve istek sırası dahil olmak üzere bu bilgileri kullanarak sunucu yükünü, maliyetleri azaltmak ve hızı artırmak, 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 sayısını ve boyutunu azalttıktan ve uygun HTTP sohbetlerini başlattıktan sonra, bir sonraki adım sayfanızda çalışan komut dosyalarını incelemek ve optimize etmektir. Neyse ki, bir sonraki bölümde ele alacağımız Komut Dosyaları sekmesi tam da bunu yapar.

Ek Kaynaklar

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

• Google I/O 2010'daki Chrome Geliştirici Araçları sunum videosu ve slaytları
• Chrome Geliştirici Araçları Eğitimi

Elbette, bu makalenin 2. bölümü ve diğer birçok harika HTML5 ve Chrome içeriği için html5rocks.com'u takip edin.