Giriş
Google Chrome, web'deki uygulamalar için yapılabileceklere öncülük eden, 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 göz atma deneyimi sunmak için çok çalıştı. Google, sizin gibi geliştiricilerin mükemmel bir Chrome deneyimi yaşamalarını da sağladı. 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 uygulamalarının iç özelliklerine ayrıntılı şekilde erişmesine olanak tanır.
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ış sunacak ve bu araçların en popüler, kullanışlı özelliklerini ele alacağız. Hedef kitlemiz, Geliştirici Araçları'nı bilmeyen veya henüz araştırmamış web geliştiricileridir. Ancak, deneyimli bir web geliştiricisi olsanız bile, bir veya iki ipucu alacağınızdan eminiz.
Geliştirici Araçları örneğiniz bu makalede bulunan ekran görüntüleriyle tam olarak eşleşmiyorsa, adımları takip edip burada açıklanan tüm özelliklere erişebilmek için 5'e yükseltmenizi öneririz.
Genel bakış
Genel olarak, 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, Denetimler ve Konsol var.
Öğeler
Öğeler aracı, web sayfasını tarayıcının gördüğü şekilde görmenize olanak tanır. Yani, Öğeler aracını kullanarak ham HTML'yi, ham CSS stillerini, Doküman Nesne Modeli'ni görebilir ve bunlardan birini gerçek zamanlı olarak değiştirebilirsiniz.
Kaynaklar
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. 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ırmak için idealdir.
Komut Dosyaları
Bir sayfanın JavaScript içinde gezinmek için Komut Dosyaları aracını kullanırsınız. Burada, sayfanın gerektirdiği komut dosyalarının bir 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 aracı, gelişmiş zamanlama ve hız analizi için Chrome'daki çeşitli sahne arkası etkinliklerini ayrıntılı olarak gösterir. Tarayıcının DOM etkinliklerini işlemesinin, sayfa düzenlerini oluşturmanın ve pencereyi boyamanın ne kadar sürdüğünü öğrenebilirsiniz.
Profiller
Profiller aracı, JavaScript komut dosyalarının performansını yakalayıp analiz etmenize yardımcı olur. Örneğin, hangi işlevlerin yürütülmesinin en fazla zaman aldığını öğrenebilir ve tam olarak nerede optimizasyon yapılması gerektiğine odaklanabilirsiniz.
Depolama
Modern web uygulamaları, çerezlerden daha fazla kalıcılık gerektirir. Depolama 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 depolama alanlarında, oturum depolamasında ve çerezlerde depolanan verileri görüntüleyebilir ve sorgulayabilir.
Denetim
Denetim aracı, kendi web optimizasyonu danışmanınızın yanında olmasını sağlamak 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ı'nda tüm özellikleri içeren bir Konsol sunulmaktadır. 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 belirlemeniz yeterlidir. Bu, Geliştirici Araçları'nı açar ve tıkladığınız öğeyi ayrıntılı bir şekilde gösterir.
Bunun 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ı şuna benzeyecektir:
Geliştirici Araçları'nın Öğeler sekmesinin içinde nasıl açıldığına ve Google logosuna ilişkin <img> etiketinin otomatik olarak ayrıntılarına inip vurgulandığına dikkat edin. Bu, belirli bir sayfa öğesini hangi HTML'nin oluşturduğunu merak ettiğiniz durumlarda çok işinize yarar.
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-Jtuşlarını seçin. - Mac'te
Command-Option-Jtuşlarını seçin.
Son olarak, araçları ana tarayıcı menüsünden açabilirsiniz.
Mac'te ve ana uygulama menü ç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çtığınıza göre artık Google'ın ana sayfasındaki öğeleri keşfederek işe başlayalım.
Öğeler
Geliştirici Araçları'ndaki ilk sekme Öğeler'dir. Bu, web sayfasının yapısına açılan pencerenizdir ve tarayıcınızın gördüğü şekilde sunulur.
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. Öğeler sekmesinde, sayfanın DOM'si güzel bir şekilde biçimlendirilmiş olacak ve size HTML öğelerini, bunların üst öğelerini ve bunların alt öğelerini kolayca gösterecektir. Ziyaret ettiğiniz sayfalar genellikle küçültülmüş veya sadece kötü görünen HTML içerir. Bu da 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 bir çözümdür.
Örneğin, aşağıda Google ana sayfasının "kaynağı görüntüle" çıktısı verilmiştir.
Optimize edildiği ve küçültüldüğü için yukarıdaki kaynağı okumak zordur. Bu biçim, istemciler ve sunucular için iyiyken, geliştiriciler için zordur!
Bunun yerine, bir sayfanın kaynağını okumak istediğinizde, kolayca yazdırılmış ve söz dizimiyle vurgulanmış bir öğe hiyerarşisini görüntülemek için Öğeler sekmesini kullanın.
Öğeler sekmesi ayrıca sayfadaki herhangi bir öğe için Stiller, Metrikler, Özellikler ve Etkinlik İşleyicilere göz atmanıza, etkileşimde bulunmanıza ve hatta bunları bazen değiştirmenize olanak tanır.
Stillere Göz Atma
CSS'nin kademeli yapısı, Öğeler sekmesindeki Stiller tarayıcısını çok kullanışlı hale getirir. Bazen stiller kendi üzerine daraltılır ve istenmeyen görseller görünür. Tarayıcının öğeye hangi stil kuralını uyguladığını bilmek, böyle bir sorunu ayıklamanıza yardımcı olur.
Öğeler sekmesinde herhangi bir öğeyi tıkladığınızda o öğeye eklenmiş tüm stiller görüntülenir.
Yukarıdaki ekran görüntüsünde, uygulanan tüm stil özelliklerini bildirebildiğimizi görürsünüz. Örneğin, dolgu doğrudan <img> öğesinin stil özelliğinden gelir. Bununla birlikte, genişlik ve yükseklik kendi yerel özelliklerinden alınır. İşin ilginç yanı sıra <center> etiketi, <body> etiketi ve diğerlerinden devralınan stiller olduğunu görebilirsiniz.
Bağımsız stilleri ve bunların nereden geldiğini görmek güzel olsa da, hesaplandıktan ve öğeye uygulandıktan sonra son 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.
Şimdi, Öğeler Sekmesi tarafından sağlanan diğer özelliklere kısa bir göz atacağız. Gelecek makalelerde bu konuları daha ayrıntılı olarak ele alacağız.
Kutu Modeli
Metrikler menüsünü seçerek kutu modelini, seçili öğeye uygulandığı şekilde görebilirsiniz:
Öğe Özellikleri
Özellikler menüsünü seçerek öğenin tüm özelliklerini, JavaScript ve DOM'un göreceği şekilde görebilirsiniz:
Etkinlik İşleyiciler
Son olarak, Etkinlik İşleyiciler menüsü aracılığıyla etkinlik işleyicilerin öğeye ekli olduğunu veya öğenin üzerinden geçtiğini bile görebilirsiniz:
Özet
Öğeler Sekmesi ile çok sayıda işlev kullanılabilir. Gelecek makalelerde, bağımsız menüler daha ayrıntılı bir şekilde 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 problemler, Öğeler Sekmesi üzerinden hızlı ve kolay bir şekilde yanıtlanabilir.
Öğeler Sekmesini bir uber "kaynağı görüntüle" olarak düşünebilirsiniz ve sayfanız için son derece net bir görünürlük elde edin.
Sayfayı inceledikten sonra, HTML, CSS ve resimlerin ilk başta 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ı aktarmak için nasıl iletişim kurduğunu gösterir.
Kaynaklar
Uygulamanız çalışmaya başladıktan sonra, bir sonraki adımınız ağ ve bant genişliği performansını optimize etmek olmalıdır. Uygulamanızın sunucudan istemciye aktarımı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 size teşekkür eder, bant genişliği ve sunucu kaynaklarında paradan tasarruf eder ve aynı zamanda (artık site hızı dikkate alınan) Google'ın arama sonucu sıralamalarında daha iyi bir puan alırsı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 çok şaşırtıcı bir durumdur!), bunların sunucudan alınması için geçen süreyi ve aktarım sırasında ne kadar bant genişliği kullanıldığını görebilirsiniz.
İronik bir şekilde, Kaynaklar Sekmesi'nin ç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 bu işlevi etkinleştirmeniz gerekir.
Küçük çaplı performans cezası yaşamanızı istemediğinizden, varsayılan "Yalnızca bu oturum için etkinleştir"i 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.
Bu ekranda çok fazla bilgi var. O halde teker teker ele alalım.
Varsayılan davranış, sayfayla ilgili tüm kaynakların istenip yüklenmesinin ne kadar sürdüğünü size göstermektir. Müşterinin kaynak olarak kaç adet talep yaptığını bilmediğiniz için Kaynaklar listesinde aşağıya gitmek sizi şaşırtabilir. İstemciden gelen yüksek sayıda istek, performansı ciddi şekilde etkileyebilir. Kaynakların optimizasyonu ve nihai olarak azaltılması için atılacak ilk adım, istenenle ilgili görünürlük elde etmektir.
Sadece 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 öğreneceksiniz. Zaman çizelgesi görünümünü kullanarak, sayfanızdaki belirli öğelerin neden diğerlerinden daha sonra göründüğünü daha iyi anlayabilirsiniz.
İstenen tüm kaynaklara ve bu kaynakların tüm istek zaman çizelgesini nasıl oluşturduklarına dair genel bir fikir edindikten sonra, tek tek kaynakları ayrıntılı olarak inceleyebilirsiniz.
Sayfaya her eriştiğinizde bazı kaynakların istendiğini fark ederseniz bu durum, önbelleğe alma başlıklarınızın doğru şekilde yapılandırılmadığının bir göstergesidir. Soldaki listede bir kaynağı tıklayarak kaynağın tüm üstbilgilerini görüntüleyebilirsiniz.
Beklenen HTTP Yanıt Kodunun ayarlandığından ve uygun üstbilgilerin sağlandığından emin olmak için Üstbilgiler ekranını kullanın. Örneğin, kaynak nadiren değiştirilir veya hiç değiştirilmezse sunucunuz, uzak bir tarih için bir Son Kullanma Tarihi başlığı ayarlamalıdır. Bu, tarayıcıya kaynağın bu tarihe kadar 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, gelecekteki bir makalede ele alınacak çok daha fazla özellik bulunmaktadır.
İstemci tarayıcınızın web sunucusuyla nasıl iletişim kurduğunu görmek için Kaynaklar sekmesini kullanın. İstek süresi, istek boyutu ve istek sırası dahil olmak üzere bu bilgileri kullanarak sunucu yükünü ve maliyetleri azaltıp hızı artırıp kullanıcı deneyimini geliş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ı ve boyutu azaltıldıktan ve uygun HTTP ileti dizileri gerçekleştikten sonra, sıradaki adım sayfanızda çalışan komut dosyalarını araştırmak ve optimize etmektir. Neyse ki, bir sonraki videoda ele aldığımız Komut Dosyaları sekmesi tam olarak bunu yapıyor.
Ek Kaynaklar
Geliştirici Araçları hakkında daha fazla bilgi için aşağıdakileri öneririz:
- Google I/O 2010'da Chrome Geliştirici Araçları sunum videosu ve slaytları
- Chrome Geliştirici Araçları Eğitimi
Elbette, bu makalenin 2. Bölümü için html5rocks.com'un yanı sıra diğer pek çok faydalı HTML5 ve Chrome içeriğini takip etmeye devam edin.