Web Tarayıcısında Geliştirici Araçlarını Kullanarak Hata Ayıklama

Her web tarayıcısında F12 tuşuna basınca açılan geliştirici araçları, web sayfasının arka planda nasıl çalıştığını görmenin en hızlı yoludur. Bir sayfada bir şey yanlış gidiyorsa, sorunun kaynağı genellikle burada bulunur.

Geliştirici araçlarının Elements (veya Inspector) sekmesi, sayfanın HTML yapısını canlı olarak gösterir. Herhangi bir öğeye sağ tıklayıp "İncelemeyi Başlat" dersen, o öğenin tam kodunu ve stilini görebilirsin. Örneğin bir butonun renginin neden değişmediğini anlamak için, butona tıklayıp CSS kurallarını kontrol etmen yeterli.

Console sekmesi ise JavaScript hatalarını gösterir. Kodda bir sorun varsa, hata mesajı buraya yazılır. Ayrıca console.log() komutlarını kullanarak değişkenlerin değerini kontrol edebilirsin:

1console.log('Sayfa yüklendi');
2let veri = 42;
3console.log('Veri değeri:', veri);

Network sekmesinde ise sayfanın yüklenirken hangi dosyaları indirdiğini ve bunların ne kadar sürdüğünü görebilirsin. Eğer sayfa yavaş yüklüyorsa, hangi resim veya script dosyasının sorun olduğunu buradan anlarsın.

Geliştirici araçlarının bir başka kullanışlı özelliği de responsive tasarımı test etmektir. Ctrl+Shift+M (veya Cmd+Shift+M Mac'te) ile farklı cihaz ekran boyutlarında sayfanın nasıl göründüğünü kontrol edebilirsin. Böylece mobil uyumluluğu hızlıca test edersin.

Bu araçları öğrenmek, web geliştirme ve hata bulma sürecini çok daha verimli hale getirir. Başlangıçta Elements ve Console sekmelerine odaklanman yeterli.