Tarayıcıların geliştirici araçları yazılım geliştiricileri için büyük önem teşkil edip gerçek anlamda kolaylık sağlamaktadır. Herhangi bir web sitede gezinirken kullanabileceğiniz geliştirici araçlarının farklı sekmelerinde o site hakkında farklı konularda bilgi sahibi olabilirsiniz.

Geliştirici araçlarına ulaşmak için tarayıcıya sağ tıklayıp açılan menünün en altındaki Inspect (İncele)

Gelin bu sekmelerin ne görevler üstlendiğine kısaca bir gözatalım;

 

-          Elements

Web sitenin tarayıcı tarafından derlendikten sonraki son HTML yapısını görebildiğiniz kısımdır. Herhangi bir kod satırıne çift tıklama sayesinde kısıtlı, sağ tıklayıp “HTML olarak Düzenle” seçeneğini seçerek özgür şekilde müdahele edebilirsiniz.

 

-          Styles

Elements penceresinde seçtiğiniz bir elemanın sahip olduğu stil kodlarını görebileceğiniz alandır. Buradan bu stil kodlarının hangi şekillerde ve hangi kaynaktan tanımlandığını detaylı şekilde görebilirsiniz.

 

 

-          Console

Konsol ekranı ise web sitenin yine tarayıcı tarafında derlenme işleminden sonra JavaScript kodlarının çıktılarını görebileceğiniz ve web siteye JavaScript kodları ile müdahele edebileceğiniz alandır. Örneğin herhangi bir web sitesinde iken “console” kısmına aşağıdaki kodu yazıp enter’a basarsanız sitenin arkaplan renginin kırmıza döndüğünü göreceksiniz.

 

document.body.style.backgroundColor = "red";

 

-          Source

Bu sekmede o an tarayıcınızın aktif olan sekmesindeki web sitende kullanılan iç ve dış kaynaklarını görebilirsiniz. Görsel dosyaları, videolar, ses dosyaları, JS, CSS vb. Gibi içeriklerin nelerden çekildiğini görebilirsiniz.

 

-          Network

Network sekmesi en az diğer sekmeler kadar hatta bazı durumlarda diğerlerinden de önemli bir sekmedir. Bu sekmede web sitesinden dışarı çıkan bütün sorgular görülebileceği gibi web sitenin tamamen yüklenene kadar geçen süresi ayrıca hangi sürelerde hangi elemanların yüklendiği gibi detaylı sonuçlar da elde edilebilir.

 

Örneğimizde ki web sayfasının 1.33 saniyede yüklendiğini buradan görebilirsiniz.

 

Ayrıca web site hızınızı farklı bağlantılarda test etmek için ekranda gördüğünüz menüden internet hızınızı kolaylıkla değiştirebilirsiniz.

 

Bir web programcısı ya da yazılım test edicisi iseniz bu özellik sizin için bulunmaz bir nimet anlamına geliyor.