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 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
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ı
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 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
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
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 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
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:
"Öğeyi İncele"yi seçtiğinizde Geliştirici Araçları açılır ve şu şekilde görünür:
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-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çmayı seçebilirsiniz.
Mac'te, 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ü kullanıp Geliştirici Araçları'nı seçin.
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
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.
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.
Öğ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.
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.
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:
Öğe Özellikleri
Özellikler menüsünü seçerek öğenin tüm özelliklerini, JavaScript ve DOM'nin göreceği şekilde görebilirsiniz:
Etkinlik İşleyiciler
Son olarak, Etkinlik İşleyicileri menüsünden öğeye eklenmiş veya öğeye geçiş yapan etkinlik işleyicileri bile görebilirsiniz:
Ö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.
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.
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.
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.
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:
- Google I/O 2010'da Chrome Geliştirici Araçları sunum videosu ve slaytları
- Chrome Geliştirici Araçları Eğitimi
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.