Ders 03Network sekmesi nedir?Konu ve yapılacaklar
Network sekmesi, sayfa açılırken tarayıcının yaptığı her isteği satır satır listeler. Her satırın bir türü (document, stylesheet, script, img, font, fetch), durum kodu, boyutu ve süresi vardır. Waterfall sütunu isteklerin ne zaman başlayıp ne kadar sürdüğünü zaman çizelgesi olarak gösterir.
- Network açıkken sayfayı yenileyin, toplam istek sayısını okuyun.
- Filtrelerle Doc, CSS, JS, Img, Font, Fetch/XHR türlerini tek tek gösterin.
- Kırmızı görünen 404 satırını ve waterfall'da uzun süren yavaş isteği bulun.
Alıştırma · Network sekmesi
Bu sayfa açılırken kaç istek gidiyor?
Network sekmesini açın, Ctrl+R ile yenileyin. Aşağıdaki her parça ayrı bir istektir; listede her türden en az bir satır göreceksiniz.
| Tür | Bu sayfada ne | Nerede görünür |
|---|---|---|
document | Sayfanın kendisi, network.php | Listenin ilk satırı |
stylesheet | site.css ve network.css | CSS filtresi |
script | ortak.js ve network.js | JS filtresi |
font | Archivo ve Plex Mono, .woff2 | Font filtresi |
img | Logo ve sekiz sektör görseli | Img filtresi |
fetch | Piyasa özeti ve bilerek yavaşlatılmış bir istek | Fetch/XHR filtresi |
Görseller
Hızlı istek
Bekleniyor…
Yavaş istek (3 saniye)
Bekleniyor… Waterfall sütununda uzun çubuğu arayın.