Chrome Developer Tools Nasıl Kullanılır?

Chrome Developer Tools‘u açmanın birkaç yolu var. Web sitesindeki bir öğeye sağ tıklayıp Inspect diyerek, F12 tuşuna basarak ya da Ayarlar > Diğer Araçlar > Geliştirici Araçlar seçeneğine tıklayarak açmak mümkün. Dev Tools açılınca sayfanın bir kenarında açılan bir pencere görürsünüz. İşte orası geliştiricilerin, web sitesi tasarlayanların, HTML, CSS ve jQuery ile ilgilenenlerin problem çözümlerinde kullandığı araçlar bölümüdür.

Chrome Developer Tools Ne İşe Yarar?

Özellikle Front End Developer’lar tarafından kullanılan Chrome Developer Tools, Chrome’un önemli özelliklerinden biri. Web sayfalarının HTML kodlarını incelemek, sayfa içerisindeki öğelerin nasıl yapıldığını görmek adına CSS kodlarını incelemek, sayfanızda jQuery kodu kullanıyorsanız ve düzgün çalışmıyorsa kodun neresinde ne gibi hataların olduğunu çözümleyebilmek için kullanabiliyoruz. Bu pencerenin üst tarafında Elements, Console gibi sekmeler var.

Chrome Developer Tools’u ilk defa açıyorsanız sayfanın altında, sol tarafta HTML kodları, sağ tarafta ise CSS kodlarının olduğu şekilde açılır ve bu pencerenin konumunu değiştirebilir, hatta pencere dışına alarak ayrı bir pencere olarak da kullanabilirsiniz.

Elements

Chrome Developer Tools, sayfa içi kodlarını inceleyebildiğimiz gibi CSS kodlarını da inceleyebildiğimizden bahsettik. Sayfa içerisinde bir paragrafa, butona ya da imaja sağ tıklayıp Inspect Element derseniz o öğeye ait CSS kodlarını görebilirsiniz. Öğenin yazı tipi boyutu, kullanılan rengi, font ailesinin ismi, padding ve margin değerleri gibi tüm CSS özelliklerini burada görmek mümkün. Başka sitelerde beğendiğiniz bir öğenin CSS özelliklerini görmek için ideal. Hatta bu değerleri değiştirerek sayfa üzerinde anlık görüntüsünü de görebiliyorsunuz. Bir web sitesi hazırladıysanız başlık boyutu şöyle olsa nasıl olur ya da renk olarak bu rengi kullansam nasıl olur şekilde hızlı düzenlemelerle çok uğraşmadan sayfa üzerinde bu değişiklikleri göstermesi özelliğiyle CSS düzenlemelerinizi de hızlandırır.

Aynı şekilde HTML bölümünde de değişiklikler yapabilir ve sayfa içerisinde nasıl olduğunu görebilirsiniz. Bu değişiklikler sayfada kaydedilmez, sadece anlık olarak size gösterir.

Console

Chrome Developer Tools, jQuery ile ilgili hataların incelemek ya da sayfada yüklenmesi gereken ama dosya bulunamadığından 404 hatası veren JavaScript dosyalarını belirlemek için kullanıyoruz. Sayfaya bir slider eklemek istediniz ve bu slider jQuery ile çalışıyor olsun. Kodlar çalışmıyorsa nedenini burada görebiliyoruz. jQuery dosyası doğru yüklenmemiş olabiliyor ya da script dosyalarının yolu doğru tanımlanamamış oluyor veya formlardaki post değerleri ile ilgili sıkıntılar olabiliyor, hepsini burada görebiliyoruz.

Sources

Sources ekranı, siteye ait kaynak dosyaları listeleniyor. CSS ve JS dosyaları, imajlar, Google Fonts gibi external sitelerden gelen içerikler burada görünür. Yine bu dosyalar üzerinde düzenleme yapmak için kullanabilirsiniz burayı da. Özellikle script üzerinde çalışmalar yapanlar, JS dosyalarında breakpoint’ler belirleyerek kodun orada durmasını sağlıyor ve hatta sonraki fonksiyona geçirebiliyor. Ben çok JS dosyası üzerinde düzenleme yapmadığım için burayı pek kullanmıyorum. Daha çok CSS dosyalarını görüntülemek için kullanıyorum.