Modern tarayıcı geliştirici araçlarını bir süper güç olarak kullanma rehberi.
Elements paneli, web sayfasının o andaki canlı DOM (Document Object Model) yapısını ve stilini incelemenizi sağlar. Kaynak kodun aksine, JavaScript ile değişen yapıları burada anlık görebilirsiniz. Bir elemana sağ tıklayıp "Inspect" dediğinizde, o elemanın CSS özelliklerini, kutu modelini (padding, border, margin) ve hesaplanmış (computed) stillerini görebilirsiniz. Buradaki en büyük güç, geçici değişiklikler yapabilmektir. Renkleri değiştirebilir, elemanları sürükleyip yerini değiştirebilir veya yeni CSS sınıfları ekleyerek tasarımın farklı hallerini test edebilirsiniz. Ayrıca, bir eleman üzerindeki "Hover", "Active" gibi durumları (Force State) tetikleyerek CSS animasyonlarını ve geçişlerini kolayca debug edebilirsiniz.
Konsol, sadece hata mesajlarını (Error, Warning) okuduğumuz bir yer değil, aynı zamanda sayfanın JavaScript çalışma ortamına doğrudan müdahale edebileceğimiz bir komut satırıdır. console.log() en sık kullanılan yöntem olsa da, verileri tablo olarak görmek için console.table(), hiyerarşik görmek için console.dir() veya bir işlemin süresini ölçmek için console.time() gibi gelişmiş metodlar vardır. Konsol üzerinden sayfa içindeki değişkenlere erişebilir, fonksiyonları tetikleyebilir ve hatta $0 kısayolu ile Elements panelinde seçili olan son elemanı JavaScript ile manipüle edebilirsiniz. "Preserve Log" seçeneği, sayfa yenilense bile önceki logların silinmemesini sağlayarak sayfa yüklenme anındaki hataları yakalamanıza yardımcı olur.
Network paneli, sayfanın sunucudan çektiği her türlü kaynağı (resim, script, font, API isteği) listeler. Her bir isteğin ne kadar sürdüğünü (Waterfall), hangi boyutta olduğunu ve HTTP durum kodlarını (200, 404, 500 vb.) burada görebilirsiniz. Özellikle "Fetch/XHR" sekmesi, frontend ve backend arasındaki veri trafiğini (JSON paketleri) incelemek için hayati önem taşır. İsteklerin üzerine tıklayarak "Payload" (gönderilen veri) ve "Preview/Response" (gelen veri) sekmelerini kontrol edebilirsiniz. Ayrıca "Throttling" özelliği sayesinde internet hızını yavaşlatarak (3G simülasyonu), uygulamanızın zayıf ağ koşullarında nasıl performans gösterdiğini test edebilirsiniz. "Disable Cache" seçeneği ise geliştirme sırasında tarayıcının eski dosyaları kullanmasını engeller.
JavaScript kodunuzdaki mantık hatalarını bulmak için console.log yerine Sources panelindeki Breakpoint (Kesme Noktası) özelliğini kullanmak profesyonel bir yaklaşımdır. Kodun belirli bir satırına breakpoint koyduğunuzda, tarayıcı o satıra geldiğinde çalışmayı durdurur. Bu aşamada, o anki tüm değişkenlerin değerlerini (Scope), çağrı yığınını (Call Stack) inceleyebilir ve kodu satır satır ilerleterek (Step over/into) hatanın tam olarak nerede oluştuğunu görebilirsiniz. Sadece satır numarasına değil, belirli bir DOM değişikliğine (DOM Breakpoints) veya bir XHR isteğine göre de durdurma yapabilirsiniz. "Watch" penceresi sayesinde, adım adım ilerlerken belirli değişkenlerin değişimini anlık olarak takip edebilirsiniz.
Uygulamanız kasılıyorsa veya animasyonlar akıcı değilse Performance paneli devreye girer. Bir kayıt (Record) alarak sayfa üzerindeki render süreçlerini, JavaScript yürütme sürelerini ve "Recalculate Style" gibi maliyetli işlemleri görebilirsiniz. "Main" sekmesi, tarayıcının ana iş parçacığında neyin darboğaz yarattığını milisaniye hassasiyetinde gösterir. Gereksiz "Long Tasks" (50ms'den uzun süren görevler) kırmızı ile işaretlenir ve kullanıcı etkileşimini engelleyen kodları tespit etmenizi sağlar.
Application paneli, tarayıcıda saklanan tüm verileri yönetmek içindir. Local Storage, Session Storage, Cookies, IndexedDB ve Web SQL içeriklerini buradan görebilir, değiştirebilir veya silebilirsiniz. Ayrıca Service Worker'ların durumunu kontrol etmek, Manifest dosyasını incelemek ve PWA (Progressive Web App) özelliklerini test etmek için burası kullanılır. "Clear Storage" butonu ile tek bir tıkla sitenin tüm yerel geçmişini sıfırlayabilirsiniz.
Lighthouse, sitenizin performansını, erişilebilirliğini, en iyi uygulama standartlarını (Best Practices) ve SEO durumunu puanlayan otomatik bir araçtır. Bir rapor oluşturduğunda, size sadece puan vermez, aynı zamanda sitenizi nasıl iyileştireceğinize dair (örn: "Resimleri WebP formatına çevirin" veya "Render engelleyen scriptleri kaldırın") somut öneriler sunar. Modern web standartlarına uyum sağlamak için Lighthouse raporlarını 90+ puan seviyesinde tutmak hedeflenmelidir.
Cihaz modu (Ctrl+Shift+M), sayfanın farklı ekran boyutlarında (iPhone, Pixel, iPad vb.) nasıl göründüğünü simüle eder. Sadece ekran boyutunu değil, aynı zamanda dokunmatik (touch) olaylarını, cihazın yönelimini (landscape/portrait) ve hatta GPS konumunu simüle edebilirsiniz. "Responsive" seçeneği ile ekranın köşesinden tutup çekerek farklı kırılma noktalarını (breakpoints) test edebilir ve medya sorgularınızın (media queries) doğru çalışıp çalışmadığını kontrol edebilirsiniz.
Uygulamanız zamanla daha fazla RAM tüketiyor ve yavaşlıyorsa, bir bellek sızıntısı (memory leak) olabilir. Memory paneliyle "Heap Snapshot" alarak o anki bellek kullanımını inceleyebilir veya "Allocation Instrumentation on Timeline" ile hangi nesnelerin bellekte gereksiz yere tutulduğunu görebilirsiniz. Özellikle silinmemiş olay dinleyicileri (event listeners) veya referansı koparılmamış büyük diziler bellek sızıntılarının en büyük nedenidir.
DevTools içinde Ctrl+Shift+P tuşlarına basarak "Command Menu"yü açabilirsiniz. Burası DevTools'un arama motorudur. Ekran görüntüsü almak (Capture full size screenshot), koyu/açık tema arasında geçiş yapmak veya belirli panelleri gizlemek için komutlar yazabilirsiniz. Ayrıca "Sensors" paneliyle cihazın ivmeölçerini simüle etmek gibi ileri seviye gizli özellikleri de buradan aktif edebilirsiniz. DevTools'u sadece bir hata ayıklayıcı değil, bir geliştirme asistanı olarak kullanmak sizi çok daha hızlı bir yazılımcı yapar.