Web Tarayıcısında Geliştirici Araçları Nasıl Kullanılır

Web sitelerinin nasıl çalıştığını öğrenmek veya bir sorunu çözmek istiyorsan, tarayıcının içinde gizli bir araç seti var. Chrome, Firefox, Safari ve Edge'de F12 tuşuna bas, karşına geliştirici araçları çıkacak.

En çok kullanılan bölüm Elements (veya Inspector) sekmesi. Burada sayfanın HTML kodunu görebilirsin. Herhangi bir öğenin üzerine gelip sağ tıkla, "İncele" seç; o bölümün tam kodunu ve uygulanmış CSS stillerini göreceksin. Örneğin bir butonun rengi neden mavi, yazısı neden kalın diye merak ettiysen, burada cevabı bulursun.

Console sekmesi ise JavaScript hataları ve çıktılar için. Bir web sitesi düzgün çalışmıyorsa, Console'da kırmızı hata mesajları görürsün. Buraya kendin de komut yazabilirsin.

1// Console'da bu komutu yaz
2console.log(document.title);
3// Sayfanın başlığını yazdırır

Network sekmesi, sayfanın yüklenmesi sırasında hangi dosyaların indirildiğini, ne kadar zaman aldığını gösterir. Yavaş yüklenen bir site varsa, burada hangi resim veya script'in gecikme yaptığını bulabilirsin.

Performance sekmesi de sayfanın hızını ölçer. Bir düğmeye tıkladığında ne kadar sürede tepki verdiğini, hangi işlemlerin CPU'yu meşgul ettiğini analiz edebilirsin.

Bu araçlar sadece kendi sayfalarında değil, başkalarının sitelerinde de çalışır. Böylece diğer geliştiricilerin kod yapısını inceleyip öğrenebilirsin. Web geliştirme öğreniyorsan, bu araçlar senin en yakın arkadaşın olacak.