E1 · Network Paneli Anatomisi: DevTools Network paneli, bir **hava trafik kontrol kulesinin radar ekranı** gibidir: her uçuş (request) ekranda bir satır olarak belirir — nereye g
DevTools Network paneli, bir **hava trafik kontrol kulesinin radar ekranı** gibidir: her uçuş (request) ekranda bir satır olarak belirir — nereye gittiği (Name), inişinin başarılı olup olmadığı (Status), ne taşıdığı (Type), ne kadar yer kapladığı (Size) ve ne kadar sürdüğü (Time) tek bakışta görünür. Peki Postman zaten varken, tarayıcının kendi radarına neden bakıyoruz? Çünkü Postman SEN request'i gönderdiğinde çalışır — ama gerçek kullanıcı deneyiminde request'ler UI'nın kendisi (JavaScript) tarafından, senin haberin olmadan tetiklenir; Network paneli UI'nın ARKASINDA gerçekten ne olduğunu gösteren TEK yerdir. Java'da bunun en yakın karşılığı bir `HttpClient` loglama interceptor'ıdır — `OkHttp`'nin `HttpLoggingInterceptor`'ı gibi, her giden request'i ve gelen response'u konsola yazar; DevTools Network de tarayıcının GUI'li, otomatik interceptor'ıdır. QA açısından bu panel, kariyerinin en sık kullanacağın araçlarından biri olur çünkü şu senaryoyu SIK yaşarsın: ekranda her şey normal görünür, buton "Başarılı!" der — ama Network panelini açtığında kırmızı bir 500 satırı seni bekliyordur. UI seni yanıltabilir, Network paneli yanıltmaz.
Beş Sütun: Tek Bakışta Bir Request'in Özeti
Her satır bir HTTP request'tir. **Name** yolu/dosya adını, **Status** sunucunun cevabını (200/404/500...), **Type** request'in türünü (`fetch`/`xhr`/`img`/`css`), **Size** response'un boyutunu, **Time** ne kadar sürdüğünü gösterir. `/api/v1/bugs` gibi bir API request'i genelde `fetch` veya `xhr` tipindedir — bu, E2'de kullanacağın filtrenin temelidir.
Network Paneli — Sütunlar ve Örnek Satırlar
🎬 Bir Request Network Panelinde Nasıl Belirir?
Network paneli satır ekler
Tester satırı inceler
Kullanıcı (veya tester) "Bugları Yenile" butonuna tıklar.
Buton arkasındaki JavaScript kodu `fetch('/api/v1/bugs')` çağırır — bu, DevTools'un YAKALAYACAĞI andır.
Network paneli anında yeni bir satır ekler — Name doludur ama Status/Size/Time henüz "bekliyor" görünür.
Sunucudan response gelince Status (200/500), Size ve Time sütunları anında güncellenir.
Ders — Tester bu satırı UI'nın söylediğine GÜVENMEDEN kendi gözüyle okur; UI "başarılı" dese bile Status sütunu farklı bir hikaye anlatabilir.
DevTools'u Açıp İlk Request'i Görmek
F12 veya sağ tık → İncele, sonra Network sekmesine geç.