5.1 | Web Debugging: Tarayıcıda İz Sürmek

Bir web sitesi tasarlarken kodunuz VS Code üzerinde hatasız görünebilir. Ancak siteyi tarayıcıda (Chrome, Safari, Edge) açtığınızda bir butonun çalışmadığını veya verilerin gelmediğini fark edebilirsiniz. Ajanınız bu aşamada sizin tarayıcınızın "içini" göremez. İşte burada Tarayıcı Geliştirici Araçları (DevTools) devreye girer.

1. Console: Ajanın Duymadığı Çığlıklar

Tarayıcıda sağ tıklayıp "İncele" (Inspect) dediğinizde açılan Console sekmesi, web sitenizin günlüğüdür.

• Hata Mesajları: Kırmızı ile yazılan o mesajlar, ajanın haberdar olmadığı hatalardır.
• Ajanla Paylaşım: Buradaki hata metnini kopyalayıp ajana yapıştırdığınızda, ajan projenin hangi dosyasında sorun olduğunu saniyeler içinde anlar.
• Örnek: "Uncaught ReferenceError: x is not defined" hatasını Console'da görüp ajana iletmezseniz, ajan hatayı hiçbir zaman bulamaz.

[Image of web browser developer tools console tab with error messages]

2. Network: Veri Trafiğini Denetlemek

Uygulamanız Firebase veya başka bir servisten veri çekiyorsa, sorun kodda değil "yolda" olabilir.

• İstekleri İzlemek: Network sekmesi, internet üzerinden giden ve gelen her paketi gösterir.
• Neden Önemli? Ajan kodun veriyi istediğini bilir maar sunucunun "Erişim Reddedildi" (403 Forbidden) dediğini göremez. Buradaki hata kodunu ajana bildirmek, çözüm süresini %90 kısaltır.

3. Elements: Canlı Müdahale

Sitenizin tasarımı beklediğiniz gibi görünmüyorsa (örneğin bir buton kaymışsa), koda dönüp sürekli deneme-yanılma yapmak yerine Elements sekmesini kullanırız.

• Anlık Değişim: CSS değerlerini tarayıcı üzerinde değiştirip sonucu anında görürsünüz.
• Ajan Yardımı: İstediğiniz görünüme tarayıcıda ulaştığınızda, oradaki CSS kodunu ajana verip: "Bunu projemdeki ana stil dosyasına uygun şekilde entegre et" diyebilirsiniz.

[Image of web developer tools elements tab showing HTML and CSS structure]

4. Kod Okuryazarlığı ve DevTools Uyumu

Unutmayın, DevTools size "sorunu" gösterir; ajan ise "çözümü" sunar. Sizin göreviniz bu iki dünya arasında köprü kurmaktır. Bir "Network" hatasını kopyalayıp ajana verirken; "Cloud functions loglarını kontrol ettim, 500 hatası alıyorum, kodun neresini düzeltmeliyim?" demek, profesyonel bir yazılımcı refleksi göstermektir.

Sözlük (Glossary)

• DevTools (Geliştirici Araçları): Tarayıcıların içinde yerleşik olarak bulunan hata ayıklama ve analiz paneli.
• Console (Konsol): Yazılımın çalışma anında ürettiği metin mesajlarının ve hataların döküldüğü alan.
• Network (Ağ) Sekmesi: Uygulamanın internet üzerinden yaptığı veri alışverişini izlediği bölümdür.
• Inspect (İncele): Bir web sayfasının kaynak kodlarını ve stil yapısını tarayıcıda anlık olarak görmeyi sağlayan komut.

Sonraki Adım: 5.2 | Mobil Debugging: Flutter ve Cihaz Logları.