Ağ özellikleri referansı

Chrome Geliştirici Araçları ağ analizi özelliklerinin kapsamlı bir referansı olan bu makalede, sayfanızı nasıl yüklediğini analiz etmenin yeni yollarını keşfedin.

Ağ isteklerini kaydetme

Geliştirici Araçları açık olduğu sürece varsayılan olarak tüm ağ isteklerini Ağ panelinde kaydeder.

Ağ isteklerini kaydetmeyi durdurma

Kayıt isteklerini durdurmak için:

• Ağ panelinde Ağ günlüğü kaydetmeyi durdur'u tıklayın. DevTools'un artık istek kaydetmediğini belirtmek için gri renge döner.
• Ağ paneli odaktayken Command> + E (Mac) veya Ctrl + E (Windows, Linux) tuşlarına basın.

İstekleri temizleme

İstekler tablosundaki tüm istekleri temizlemek için Ağ panelinde Temizle'yi tıklayın.

İstekleri sayfa yüklemeleri arasında kaydetme

İstekleri sayfa yüklemelerinde kaydetmek için Ağ panelindeki Günlüğü koru onay kutusunu işaretleyin. Günlüğü koru'yu devre dışı bırakana kadar DevTools tüm istekleri kaydeder.

Sayfa yükleme sırasında ekran görüntüsü alma

Sayfanızın yüklenmesini bekleyen kullanıcıların ne gördüğünü analiz etmek için ekran görüntüsü alın.

Ekran görüntülerini etkinleştirmek için Ağ panelinde Ayarlar'ı açıp Ekran görüntüsü al'ı işaretleyin.

Ekran görüntüsü almak için Ağ paneli odaktayken sayfayı yeniden yükleyin.

Ekran görüntülerini yakaladıktan sonra aşağıdaki şekillerde etkileşimde bulunabilirsiniz:

• Ekran görüntüsünün alındığı noktayı görmek için fareyle ekran görüntüsünün üzerine gelin. Genel bakış zaman çizelgesinde sarı bir çizgi görünür.
• Ekran görüntüsü alındıktan sonra gerçekleşen tüm istekleri filtrelemek için ekran görüntüsünün küçük resmini tıklayın.
• Bir küçük resmi çift tıklayarak yakınlaştırın.

XHR isteğini tekrar oynat

Bir XHR isteğini yeniden oynatmak için İstekler tablosunda aşağıdakilerden birini yapın:

• İsteği seçin ve R tuşuna basın.
• İsteği sağ tıklayın ve XHR'yi yeniden oynat'ı seçin.

Yükleme davranışını değiştirme

Tarayıcı önbelleğini devre dışı bırakarak ilk kez gelen bir ziyaretçiyi taklit etme

Sitenizi ilk kez ziyaret eden bir kullanıcının deneyimini taklit etmek için Önbelleği devre dışı bırak onay kutusunu işaretleyin. Geliştirici Araçları, tarayıcı önbelleğini devre dışı bırakır. İstekler tekrarlanan ziyaretlerde tarayıcı önbelleğinden sunulduğundan bu yöntem, ilk kez uygulamayı kullanan bir kullanıcının deneyimini daha doğru bir şekilde taklit eder.

Ağ koşulları çekmecesinden tarayıcı önbelleğini devre dışı bırakma

Diğer Geliştirici Araçları panellerinde çalışırken önbelleği devre dışı bırakmak istiyorsanız Ağ koşulları çekmecesini kullanın.

1. Ağ Koşulları çekmecesini açmak için simgesini tıklayın.
2. Önbelleği devre dışı bırak onay kutusunu işaretleyin veya kutunun işaretini kaldırın.

Tarayıcı önbelleğini manuel olarak temizleme

Tarayıcı önbelleğini istediğiniz zaman manuel olarak temizlemek için İstentiler tablosunun herhangi bir yerini sağ tıklayın ve Tarayıcı önbelleğini temizle'yi seçin.

Çevrimdışı taklit etme

Progresif web uygulamaları, hizmet çalışanlarının yardımıyla çevrimdışı çalışabilen yeni bir web uygulaması sınıfıdır. Bu tür bir uygulama oluştururken veri bağlantısı olmayan bir cihazı hızlıca simüle edebilmek yararlıdır.

Tamamen çevrimdışı bir ağ deneyimini simüle etmek için Önbelleği devre dışı bırak onay kutusunun yanındaki Ağ tıkanması açılır menüsünden Çevrimdışı'nı seçin.

DevTools, çevrimdışı modun etkin olduğunu hatırlatmak için Ağ sekmesinin yanında bir uyarı simgesi gösterir.

Yavaş ağ bağlantılarını taklit etme

Hızlı 4G, yavaş 4G veya 3G'ü taklit etmek için üstteki işlem çubuğundaki Bant genişliği sınırlaması açılır menüsünden ilgili hazır ayarı seçin.

DevTools, tıkanıklığı azaltmanın etkin olduğunu hatırlatmak için Ağ panelinin yanında bir uyarı simgesi gösterir.

Özel tarama sınırı profilleri oluşturma

Yavaş veya hızlı 4G gibi hazır ayarlara ek olarak kendi özel akış kısıtlaması profillerinizi de ekleyebilirsiniz:

1. Düşük hızlandırma menüsünü açıp Özel > Ekle...'yi seçin.
2. Ayarlar Ayarlar > Düşük Bit Hızı bölümünde açıklandığı şekilde yeni bir düşük bit hızı profili oluşturun.

3. Ağ paneline geri dönüp Düşük Hız açılır menüsünden yeni profilinizi seçin.

   

DevTools, tıkanıklığı azaltma özelliğinin etkin olduğunu hatırlatmak için Ağ panelinin yanında uyarı simgesi gösterir.

WebSocket bağlantılarını sınırlama

DevTools, 99 sürümünden beri HTTP isteklerine ek olarak WebSocket bağlantılarını da sınırlandırıyor.

WebSocket throttling'ini gözlemlemek için:

1. Örneğin, bir test aracı kullanarak yeni bir bağlantı başlatın.
2. Ağ panelinde Sıkıştırma yok'u seçin ve bağlantı üzerinden bir mesaj gönderin.
3. Çok yavaş bir özel tarama hızı sınırlama profili (ör. 10 kbit/s) oluşturun. Bu kadar yavaş bir profil, farkı fark etmenize yardımcı olur.
4. Ağ panelinde profili seçin ve başka bir mesaj gönderin.
5. WS filtresini açıp kapatın, bağlantınızın adını tıklayın, Mesajlar sekmesini açın ve gönderim ile yankılanan mesajlar arasındaki zaman farkını, akış kısıtlaması uygulanırken ve uygulanmazken kontrol edin. Örneğin:

Ağ koşulları çekmecesinden yavaş ağ bağlantılarını taklit etme

Diğer DevTools panellerinde çalışırken ağ bağlantısını kısıtlamak istiyorsanız Ağ koşulları çekmecesini kullanın.

1. Ağ Koşulları çekmecesini açmak için simgesini tıklayın.
2. Ağ tıkanıklığı menüsünden bir bağlantı hızı seçin.

Tarayıcı çerezlerini manuel olarak temizleme

Tarayıcı çerezlerini dilediğiniz zaman manuel olarak temizlemek için İstentiler tablosunun herhangi bir yerini sağ tıklayın ve Tarayıcı çerezlerini temizle'yi seçin.

HTTP yanıt başlıklarını geçersiz kılma

Dosyaları ve HTTP yanıtı üstbilgilerini yerel olarak geçersiz kılma başlıklı makaleyi inceleyin.

Kullanıcı aracısını geçersiz kılma

Kullanıcı aracısını manuel olarak geçersiz kılmak için:

1. Ağ Koşulları çekmecesini açmak için simgesini tıklayın.
2. Otomatik olarak seç'i temizleyin.
3. Menüden bir kullanıcı aracısı seçeneği belirleyin veya kutuya özel bir kullanıcı aracısı girin.

Arama istekleri

İstek başlıkları, yük verileri ve yanıtlar arasında arama yapmak için:

1. Sağdaki Arama sekmesini açmak için aşağıdaki kısayola basın:

   • macOS'te Command + F.
   • Windows veya Linux'ta Ctrl + F.

2. Arama sekmesinde sorgunuzu girip Enter tuşuna basın. İsteğe bağlı olarak match_case veya regular_expression'i tıklayarak büyük/küçük harf duyarlılığı ya da normal ifadeleri etkinleştirebilirsiniz.

3. Arama sonuçlarından birini tıklayın. Ağ panelinde, eşleşen istek sarı renkle vurgulanır. Ayrıca panel, Başlıklar veya Yanıt sekmesini de açar ve varsa burada eşleşen dizeyi vurgular.

Arama sonuçlarını yenilemek için yenile Yenile'yi tıklayın. Sonuçları temizlemek için engelle Temizle'yi tıklayın.

DevTools'ta arama yapabileceğiniz tüm yöntemler hakkında daha fazla bilgi için Arama: Yüklenen tüm kaynaklarda metin bulma başlıklı makaleyi inceleyin.

İstekleri filtreleme

İstekleri mülklere göre filtreleme

İstekleri, alanına veya boyutuna göre filtrelemek için Filtre kutusunu kullanın.

Kutuyu görmüyorsanız Filtreler çubuğu muhtemelen gizlidir. Filtreler çubuğunu gizleme bölümüne bakın.

Filtrenizi tersine çevirmek için Filtre kutusunun yanındaki Tersle onay kutusunu işaretleyin.

Her bir mülkü boşlukla ayırarak birden fazla mülkü aynı anda kullanabilirsiniz. Örneğin, mime-type:image/gif larger-than:1K bir kilobayttan büyük tüm GIF'leri gösterir. Bu çok mülklü filtreler VE işlemlerine eşdeğerdir. VEYA işlemleri desteklenmez.

Aşağıda, desteklenen mülklerin tam listesi verilmiştir.

• cookie-domain. Belirli bir çerez alanını ayarlayan kaynakları gösterir.
• cookie-name. Belirli bir çerez adını ayarlayan kaynakları gösterin.
• cookie-path. Belirli bir çerez yolunu ayarlayan kaynakları gösterir.
• cookie-value. Belirli bir çerez değerini ayarlayan kaynakları gösterin.
• domain. Yalnızca belirtilen alandaki kaynakları göster. Birden fazla alan adı eklemek için joker karakter (*) kullanabilirsiniz. Örneğin, *.com, .com ile biten tüm alan adlarındaki kaynakları gösterir. DevTools, otomatik tamamlama açılır menüsünü karşılaştığı tüm alan adlarıyla doldurur.
• has-overrides. content, headers, tüm geçersiz kılmaları (yes) veya hiçbir geçersiz kılmayı (no) geçersiz kılan istekleri gösterin. İstek tablosuna ilgili Geçersiz kılma var sütununu ekleyebilirsiniz.
• has-response-header. Belirtilen HTTP yanıtı üst bilgisini içeren kaynakları gösterin. DevTools, otomatik tamamlama açılır menüsünü karşılaştığı tüm yanıt başlıklarıyla doldurur.
• is. WebSocket kaynaklarını bulmak için is:running'ı kullanın.
• larger-than. Bayt cinsinden belirtilen boyutun üstündeki kaynakları göster. 1000 değerini ayarlamak, 1k değerini ayarlamaya eşdeğerdir.
• method. Belirtilen bir HTTP yöntemi türü üzerinden alınan kaynakları gösterin. Geliştirici Araçları, otomatik tamamlama açılır menüsünü karşılaştığı tüm HTTP yöntemleriyle doldurur.
• mime-type. Belirtilen MIME türündeki kaynakları göster. Geliştirici Araçları, otomatik tamamlama açılır menüsünü karşılaştığı tüm MIME türleriyle doldurur.
• mixed-content. Karışık içerik kaynaklarının tümünü (mixed-content:all) veya yalnızca gösterilenleri (mixed-content:displayed) gösterin.
• priority. Öncelik düzeyi belirtilen değerle eşleşen kaynakları gösterin.
• resource-type. Bir kaynak türünün (ör. resim) kaynaklarını gösterin. Geliştirici Araçları, otomatik tamamlama açılır menüsünü karşılaştığı tüm kaynak türleriyle doldurur.
• response-header-set-cookie. Sorunlar sekmesinde ham Set-Cookie başlıklarını gösterin. Yanlış Set-Cookie başlıklarına sahip hatalı oluşturulmuş çerezler, Ağ panelinde işaretlenir.
• scheme. Korunmayan HTTP (scheme:http) veya korunan HTTPS (scheme:https) üzerinden alınan kaynakları gösterin.
• set-cookie-domain. Belirtilen değerle eşleşen bir Domain özelliğine sahip Set-Cookie üst bilgisi olan kaynakları gösterin. Geliştirici Araçları, otomatik tamamlamayı karşılaştığı tüm çerez alanlarıyla doldurur.
• set-cookie-name: Belirtilen değerle eşleşen bir ada sahip Set-Cookie üst bilgisine sahip kaynakları gösterin. Geliştirici Araçları, otomatik tamamlamayı karşılaştığı tüm çerez adlarıyla doldurur.
• set-cookie-value. Belirtilen değerle eşleşen bir değere sahip Set-Cookie üst bilgisi olan kaynakları gösterin. DevTools, otomatik tamamlamayı karşılaştığı tüm çerez değerleriyle doldurur.
• status-code. Yalnızca HTTP durum kodu belirtilen kodla eşleşen kaynakları gösterin. DevTools, otomatik tamamlama açılır menüsünü karşılaştığı tüm durum kodlarıyla doldurur.
• url. Belirtilen değerle eşleşen bir url içeren kaynakları gösterin.

İstekleri türe göre filtreleme

İstekleri kaynak türüne göre filtrelemek için Ağ panelindeki Tümü, Getir/XHR, JS, CSS, Resim, Medya, Yazı tipi, Belge, WS (WebSocket), Wasm (WebAssembly), Manifest veya Diğer (burada listelenmeyen diğer türler) düğmelerini tıklayın.

Bu düğmeleri görmüyorsanız Filtreler işlem çubuğu muhtemelen gizlidir. Filtre çubuğunu gizleme bölümüne bakın.

Birden fazla türde kaynağı aynı anda göstermek için Command (Mac) veya Control (Windows, Linux) tuşunu basılı tutun ve ardından birkaç tür filtresini tıklayın.

İstekleri zamana göre filtreleme

Yalnızca bu zaman aralığında etkin olan istekleri görüntülemek için Genel Bakış zaman çizelgesini sola veya sağa sürükleyin. Filtre dahil edicidir. Vurgulanan süre boyunca etkin olan tüm istekler gösterilir.

Veri URL'lerini gizle

Veri URL'leri, diğer dokümanlara yerleştirilmiş küçük dosyalardır. İstekler tablosunda gördüğünüz ve data: ile başlayan tüm istekler veri URL'sidir.

Bu istekleri gizlemek için Filtreler işlem çubuğunda Diğer filtreler > check_box Veri URL'lerini gizle'yi seçin.

Alt kısımdaki durum çubuğu, toplam istek sayısına kıyasla gösterilen isteklerin sayısını gösterir.

Uzantı URL'lerini gizle

Yazdığınız koda odaklanmak için Chrome'a yüklemiş olabileceğiniz uzantılar tarafından gönderilen alakasız istekleri filtreleyebilirsiniz. Uzantı isteklerinin URL'leri chrome-extension:// ile başlar.

Uzatma isteklerini gizlemek için Filtreler işlem çubuğunda Diğer filtreler > check_box Uzatma URL'lerini gizle'yi seçin.

Alt kısımdaki durum çubuğu, toplam istek sayısına kıyasla gösterilen isteklerin sayısını gösterir.

Yalnızca engellenen yanıt çerezlerine sahip istekleri göster

Herhangi bir nedenle engellenen yanıt çerezlerine sahip istekler dışındaki her şeyi filtrelemek için Filtreler işlem çubuğunda Diğer filtreler > check_box Engellenen yanıt çerezleri'ni seçin. Bu demo sayfasında deneyin.

Alt kısımdaki durum çubuğu, toplam istek sayısına kıyasla gösterilen isteklerin sayısını gösterir.

Bir yanıt çerezinin engellenmesinin nedenini öğrenmek için isteği seçin, Çerezler sekmesini açın ve fareyle bilgi bilgi simgesinin üzerine gelin.

Ayrıca, Ağ panelinde, Chrome flag'leri veya yapılandırması nedeniyle engellenen çerezlerin bulunduğu isteklerin yanında bir uyarı simgesi gösterilir. Fareyle simgesinin üzerine gelerek ipucu içeren bir ipucunu görün ve daha fazla bilgi için Sorunlar paneline gitmek üzere simgeyi tıklayın.