Tarayıcı DevTools

Bu hattın on sekiz dersinde defalarca "DevTools'ta bak" dedik. Bu ders o cümlenin karşılığını tek yerde topluyor. DevTools bir lüks değil, ön yüz geliştiricisinin asıl teşhis aracıdır: CSS'in neden tutmadığı, isteğin neden 401 döndüğü, sayfanın neden takıldığı ve ekran okuyucunun ne duyduğu tahmin edilerek değil okunarak bulunur. Deneyimli bir geliştiriciyi ayıran şey daha çok komut bilmesi değil, hangi soruyu hangi panelde soracağını bilmesidir — bu dersin asıl konusu odur.

01Ne öğreneceksin

02Açmak ve komut menüsü

Komut menüsü (Ctrl+Shift+P) menülerde kaybolmayı bitirir: yazdığın kelimeye göre komut arar. Sık kullanılanlar: "screenshot" (tam sayfa ya da tek öge ekran görüntüsü), "coverage", "rendering", "sensors", "disable JavaScript", "show accessibility". Tek bir kısayol öğrenecek olsan bu olmalı.

Alttaki çekmece (Esc) da bilinmelidir: hangi panelde olursan ol konsolu ya da başka bir sekmeyi (Coverage, Rendering, Network conditions) yanına açar — Elements'te CSS düzenlerken konsolu görmek için panel değiştirmen gerekmez.

03Elements: yapı ve stil

2. derste "kaynak kod ≠ DOM" demiştik; Elements paneli canlı DOM'u gösterir. HTML'i çift tıklayıp düzenleyebilir, ögeyi sürükleyebilir, sağ tıkla gizleyebilir ya da silebilirsin — hepsi geçicidir, yenilemede kaybolur.

Durum zorlama: Styles bölmesindeki :hov düğmesi :hover, :focus, :focus-visible, :active ve :visited durumlarını sabitler. Fareyi çekince kaybolan stilleri incelemenin tek pratik yolu budur — odak halkalarını denetlerken sürekli kullanılır.

DOM kesme noktaları: bir ögeye sağ tıklayıp Break on → subtree modifications / attribute modifications / node removal seçersen, o ögeyi hangi kodun değiştirdiğini yakalarsın. "Bu sınıfı kim ekliyor" ya da "bu satır neden siliniyor" sorularının en hızlı cevabıdır ve üçüncü parti betiklerle uğraşırken hayat kurtarır.

Son olarak Elements'te renk seçicisi kontrast oranını gösterir (6. ders) ve ::before/::after gibi sözde ögeler ağaçta ayrı satır olarak görünür.

04Console: log'un ötesi

$0            // Elements'te SEÇİLİ öge  ($1, $2… önceki seçimler)
$("sel")      // document.querySelector kısayolu
$$("sel")     // querySelectorAll — DİZİ döndürür (map/filter çalışır)
$x("//tr")    // XPath ile seçim

copy($0)              // panoya kopyala
getEventListeners($0) // ögedeki dinleyiciler
monitorEvents($0, "click")   // olayları konsola akıt (bitince unmonitorEvents)
queryObjects(Promise)        // bellekteki tüm örnekler

console.table(kayitlar);                    // dizi/nesne → tablo
console.group("Yükleme"); … console.groupEnd();
console.time("ciz"); … console.timeEnd("ciz");
console.count("tıklama");
console.assert(sonuc.length > 0, "liste boş geldi");
console.trace();                            // buraya nereden gelindi
console.dir(el);                            // ögeyi DOM ağacı değil NESNE olarak göster

Canlı ifadeler (göz simgesi) bir ifadeyi konsolun üstünde sürekli günceller: document.activeElement yazarsan odağın nerede olduğunu klavyeyle gezerken canlı izlersin — 5. ve 16. derslerdeki odak yönetimini denetlemenin en pratik yoludur.

Konsolun filtre çubuğu ve seviye seçicisi (Errors/Warnings/Info) gürültüyü keser; Preserve log seçeneği sayfa değişse bile günlüğü korur — yönlendirme sırasında kaybolan hataları yakalamak için gerekir.

05Network: ağda ne oldu

1. derste zaman dökümünü görmüştük. Günlük kullanımda en çok işe yarayanlar:

• Filtre satırı: tür düğmeleri (Fetch/XHR, JS, CSS, Img) ve arama. status-code:404, larger-than:500k, method:POST, -domain:analytics.example gibi filtreler yazılabilir.
• Disable cache: panel açıkken önbelleği devre dışı bırakır — "değişikliğim neden görünmüyor" sorusunun ilk kontrolü.
• Kısıtlama (throttling): Slow 4G ya da özel bir profil. Offline ile çevrimdışı davranışını test edersin. Ağ kısıtlaması CPU'yu yavaşlatmaz; onun için Performance panelindeki CPU kısıtlaması kullanılır.
• Sağ tık → Copy → Copy as cURL / Copy as fetch: isteği başlıkları ve çerezleriyle birlikte kopyalar. Bir sorunu takıma bildirirken ya da terminalden yeniden denerken en hızlı yol budur.
• Sağ tık → Block request URL: bir kaynağı engelleyip sayfanın onsuz nasıl davrandığını görürsün (üçüncü parti betiğin etkisini ölçmek için).
• Sağ tık → Replay XHR: isteği yeniden gönderir.
• HAR olarak dışa aktarma: tüm oturumu dosyaya kaydeder — çerez ve belirteç içerir, paylaşmadan önce temizlenmelidir.

Bir isteğe tıklayınca: Headers (durum kodu, istek/yanıt başlıkları), Payload (gönderilen gövde — 3. derste "gerçekte ne gitti" sorusunun cevabı), Preview (biçimlendirilmiş JSON), Response (ham gövde), Timing (zaman dökümü), Initiator (bu isteği hangi kod satırı başlattı — kaynağı bilinmeyen istekleri bulmanın yolu).

1. derste konuştuğumuz CORS ikiliği burada görünür: konsolda hata vardır ama Network'te istek başarılı görünebilir; ayrıca basit olmayan isteklerde ayrı bir OPTIONS satırı bulunur.

06Sources: hata ayıklama

Hata ayıklamak console.log serpiştirmek değildir. Kesme noktası koyduğunda kodu durdurup o andaki tüm değişkenleri, çağrı zincirini ve kapsamı görürsün — üstelik kodu değiştirmeden.

Durduğunda sağ bölmede: Scope (yerel, kapanış ve küresel değişkenler — 14. derste kapanışın içindekileri burada görmüştük), Call Stack (buraya nereden gelindi), Watch (izlenen ifadeler), Breakpoints (hepsini tek yerden aç/kapat). Adım komutları: devam et, üzerinden atla (step over), içine gir (step into), dışına çık (step out).

Üç pratik ayrıntı:

• Kaynak eşlemesi (18. ders) sayesinde küçültülmüş kod yerine özgün dosyanı görürsün. Göremiyorsan üretim yapısında eşleme yayınlanmamıştır.
• Kod biçimlendirme ({} düğmesi) tek satıra sıkışmış kodu okunur hâle getirir.
• Ignore list: kütüphane dosyalarını listeye ekleyerek adımlarken onların içine girmeni engellersin — çağrı yığını da sadeleşir.

Local overrides ise az bilinen güçlü bir özelliktir: sunucudan gelen bir dosyayı yerel bir kopyayla değiştirir ve yenilemeye rağmen korur. Kaynağına erişemediğin bir ortamda (üretim ya da başka takımın servisi) bir düzeltmeyi denemenin en hızlı yoludur.

07Application ve depolama

• Local Storage / Session Storage: anahtar-değer çiftlerini görüntüle, düzenle, sil. Bu sitedeki kariyer:<dugum-id> ilerleme kayıtlarını ve kariyer:tema değerini buradan görebilirsin.
• Cookies: ad, değer, alan adı, yol, süre ve HttpOnly, Secure, SameSite sütunları — 13. hattaki oturum sorunlarının ilk bakılacak yeri.
• Cache Storage / Service Workers: çevrimdışı destek ve sürüm geçişleri; Update on reload ve Bypass for network seçenekleri geliştirmeyi kolaylaştırır.
• Back/forward cache: bfcache testini çalıştırır ve engelleyen sebebi adıyla söyler (1. ders).
• Clear site data: tüm depolamayı temizler — "ilk kez giren kullanıcı" durumunu denemenin doğru yolu.

08Performance, Lighthouse, Coverage, Rendering

Rendering sekmesindeki anahtarlar bu hattaki birçok dersi test etmeni sağlar: Paint flashing (hangi bölgeler yeniden boyanıyor — 1. ders), Layout Shift Regions (CLS'i gözle görmek), Emulate prefers-color-scheme (12. ders), Emulate prefers-reduced-motion (6. ders), Emulate vision deficiencies (renk körlüğü benzetimi — 6. ders), Frame Rendering Stats (kare hızı).

Cihaz emülasyonu (11. ders) ekran boyutunu, cihaz piksel oranını, dokunma girdisini ve kullanıcı aracısını taklit eder; taklit etmedikleri gerçek dokunma davranışı, yazılım klavyesinin görünüm alanını kısaltması, mobil tarayıcının adres çubuğu davranışı ve cihazın gerçek CPU/ağ farkıdır. Bu yüzden kritik ekranlar gerçek cihazda denenir: Android'i USB ile bağlayıp chrome://inspect üzerinden, iOS'u Safari'nin Geliştirici menüsünden uzaktan ayıklayabilirsin.

09Teşhis akışı

Asıl beceri, hangi soruyu nereye soracağını bilmektir:

Ve bir üretim gerçeği: DevTools senin makinende olanı gösterir. Kullanıcıda oluşan hatayı görmek için tarayıcıdan hata toplayan bir izleme aracı (window.onerror, unhandledrejection — 17. ders) ve gerçek kullanıcı ölçümü gerekir. 15. hatta hata ayıklamanın yöntem tarafını, 19. hatta gözlemlenebilirliği ayrıca göreceksin.

10Mini alıştırma — Bozuk sayfayı araçlarla çöz

11Kendini sına

Bir CSS kuralı uygulanmıyor. DevTools ile nasıl teşhis edersin?

Üç ihtimal vardır ve Elements paneli üçünü de gösterir. (1) Seçici tutmuyor: ögeyi seç ve kuralın Styles listesinde görünüp görünmediğine bak; görünmüyorsa eşleşme yoktur — sınıf adında yazım hatası, yanlış birleştirici (table > tr tuzağı), :nth-child karışıklığı ya da sınıfın JavaScript tarafından henüz eklenmemiş olması. (2) Bildirim geçersiz: CSS anlamadığı bildirimi sessizce atar; DevTools bunu uyarı simgesiyle gösterir — birimsiz uzunluk, yanlış özellik adı, ya da bir önceki satırda unutulan noktalı virgül (o durumda iki bildirim birden düşer). (3) Kaskadda kaybetti: kural listede vardır ama üstü çizilidir; üzerine gelince onu ezen kural gösterilir — özgüllük, kaskad katmanı ya da kaynak sırası. Computed sekmesi ise en kestirme yoldur: özelliğin son değerini ve hangi dosyanın hangi satırından geldiğini doğrudan söyler. Ek araçlar: fareyle kaybolan durumlar için :hov ile durumu zorla; stil dosyasının güncel olduğundan emin olmak için Disable cache ile yenile; sınıfı kimin eklediğini merak ediyorsan ögeye "attribute modifications" DOM kesme noktası koy.

Network panelinde bir isteği incelerken nelere bakarsın?

Sırasıyla: (1) Durum kodu — 2xx/3xx/4xx/5xx hangi tarafın sorunu olduğunu söyler; 17. derste gördüğümüz gibi fetch 404'te hata fırlatmaz, dolayısıyla kod "başarılı" görünse de burada 404 durabilir. (2) Headers — istek başlıkları (Authorization, Content-Type, Cookie) ve yanıt başlıkları (Cache-Control, ETag, Vary, CORS başlıkları). (3) Payload — gerçekte ne gönderildi; form alanlarının eksik gitmesi gibi hataların tek doğru teşhis yeri burasıdır. (4) Preview/Response — sunucunun döndürdüğü gövde ve hata sözleşmesi. (5) Timing — DNS, bağlantı, SSL, TTFB ve indirme dökümü; yavaşlığın sunucuda mı ağda mı olduğunu söyler. (6) Initiator — bu isteği hangi kod satırı başlattı; kaynağı bilinmeyen istekleri bulmanın yolu. Ayrıca: Disable cache ile önbelleği devre dışı bırakmak, Slow 4G ile kısıtlamak, Copy as cURL ile isteği terminale taşımak ve Block request URL ile bir kaynağı engelleyip etkisini ölçmek. CORS sorunlarında tipik görüntü şudur: konsolda hata vardır ama Network'te istek başarılı görünür ve basit olmayan isteklerde ayrı bir OPTIONS satırı bulunur.

Hata ayıklarken console.log yerine kesme noktası kullanmanın avantajları nelerdir?

console.log yalnız yazdığın değişkeni ve koyduğun satırı gösterir; her yeni soru için kodu değiştirip sayfayı yenilemek gerekir. Kesme noktası kodu durdurur ve o an her şeye erişirsin: Scope bölmesinde yerel, kapanış ve küresel değişkenlerin tamamı (14. derste kapanışın içindekileri burada görmüştük), Call Stack'te buraya nereden gelindiği, Watch ile istediğin ifadeyi anında değerlendirme ve konsoldan o bağlamda kod çalıştırma imkânı. Üstelik kodu değiştirmeden çalışır — üretim kodunda günlük satırı bırakma riski olmaz. Özellikle güçlü türleri vardır: koşullu kesme noktası (döngünün 400. turunda dur), günlük noktası (durmadan değer yazdır — console.log'un kodsuz hâli), XHR/fetch kesme noktası, olay dinleyicisi kesme noktası (hangi kodun çalıştığı bilinmiyorsa) ve DOM kesme noktası (bu sınıfı kim ekliyor). Ayrıca console.log'un bilinen bir tuzağı vardır: nesneleri canlı referansla gösterir, satırı açtığında nesnenin o anki hâlini görürsün — yanıltıcıdır. Yine de console.log'un yeri vardır: hızlı bir doğrulama, üretimde yeniden oluşturulamayan bir akış ya da zamanlamaya duyarlı bir hata (durdurmak davranışı değiştirir) için uygundur.

Cihaz emülasyonu gerçek cihaz testinin yerini tutar mı?

Hayır. Emülasyon şunları taklit eder: görünüm alanı boyutu, cihaz piksel oranı (DPR), dokunma girdisi, kullanıcı aracısı dizesi ve isteğe bağlı olarak ağ/CPU kısıtlaması. Taklit etmedikleri: gerçek dokunma ve jest davranışı, yazılım klavyesinin açılınca görünüm alanını kısaltması, mobil tarayıcının adres çubuğu davranışı (8. derste 100vh tuzağının sebebi), cihazın gerçek işlemci ve bellek sınırları, pil/termal kısıtlama, ve en önemlisi farklı tarayıcı motorları — iOS'ta tüm tarayıcılar WebKit kullanır, dolayısıyla Chrome'un mobil emülasyonu iOS Safari'yi göstermez. Doğru yaklaşım katmanlıdır: geliştirme sırasında emülasyonla hızlı döngü, ardından kritik akışların gerçek cihazda denenmesi. Gerçek cihazda hata ayıklamak da mümkündür: Android'i USB ile bağlayıp chrome://inspect üzerinden, iPhone'u Safari'nin Geliştirici menüsünden uzaktan ayıklarsın. Son olarak DevTools yalnız senin makinendekini gösterir; kullanıcıda oluşan hataları görmek için window.onerror/unhandledrejection ile hata toplama ve gerçek kullanıcı ölçümü (RUM) gerekir.

12Sınav köşesi