Ağ özellikleri referansı

Kayce Basques

Sofia Emelianova

Chrome Geliştirici Araçları'nın ağ analizi özellikleriyle ilgili bu kapsamlı referansta sayfanızın nasıl yüklendiğini analiz etmenin yeni yollarını keşfedin.

Ağ isteklerini kaydetme

Varsayılan olarak, Geliştirici Araçları açık olduğu sürece 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. Geliştirici Araçları'nın artık istekleri kaydetmediğini belirtmek için gri renge döner.
• Ağ paneli odaklanmış durumdayken Command + E (Mac) veya Control + 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.

Sayfa yüklemeleri arasında istekleri kaydetme

İstekleri sayfa yüklemeleri arasında kaydetmek için Ağ panelinde Günlüğü koru onay kutusunu işaretleyin. Geliştirici Araçları, Günlüğü koru'yu devre dışı bırakana kadar tüm istekleri kaydeder.

Sayfa yüklenirken ekran görüntüsü alma

Kullanıcıların sayfanızın yüklenmesini beklerken gördüklerini analiz etmek için ekran görüntüleri alın.

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

Ekran görüntülerini yakalamak için Ağ paneli odaklanmış durumdayken sayfayı yeniden yükleyin.

Ekran görüntülerini aldıktan sonra aşağıdaki şekillerde kullanabilirsiniz:

• Ekran görüntüsünün üzerine gelerek ekran görüntüsünün alındığı noktayı görüntüleyin. Genel bakış zaman çizelgesinde sarı bir çizgi görünür.
• Ekran görüntüsü alındıktan sonra gerçekleşen istekleri filtrelemek için ekran görüntüsünün küçük resmini tıklayın.
• Yakınlaştırmak için küçük resmi çift tıklayı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çip 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. Bu, ilk kez gelen bir kullanıcının deneyimini daha doğru şekilde taklit eder. Çünkü istekler, tekrar ziyaretlerde tarayıcı önbelleğinden sunulur.

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

Diğer DevTools 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 İstekler tablosunda herhangi bir yeri sağ tıklayın ve Tarayıcı önbelleğini temizle'yi seçin.

Çevrimdışı olarak taklit etme

Hizmet çalışanları sayesinde çevrimdışı olarak da çalışabilen Progresif Web Uygulamaları adı verilen yeni bir web uygulaması sınıfı vardır. Bu tür bir uygulama geliştirirken veri bağlantısı olmayan bir cihazı hızlı bir şekilde simüle edebilmek faydalıdır.

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

Geliştirici Araçları, ç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'yi taklit etmek için üstteki işlem çubuğunda bulunan Sınırlama açılır menüsünden ilgili hazır ayarı seçin.

Geliştirici Araçları, kısıtlamanın etkin olduğunu hatırlatmak için Ağ panelinin yanında bir uyarı simgesi gösterir.

Özel sınırlama profilleri oluşturma

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

1. Sınırlama menüsünü açıp Özel > Ekle...'yi seçin.
2. Ayarlar Ayarlar > Sınırlama bölümünde açıklandığı gibi yeni bir sınırlama profili oluşturun.

3. Tekrar Ağ panelinde, Sınırlama açılır menüsünden yeni profilinizi seçin.

   

DevTools, kısıtlamanın etkin olduğunu hatırlatmak için Ağ panelinin yanında bir uyarı simgesi gösterir.

WebSocket bağlantılarını kısıtlama

DevTools, HTTP isteklerine ek olarak 99. sürümden itibaren WebSocket bağlantılarını da kısıtlar.

WebSocket sınırlamasını gözlemlemek için:

1. Örneğin, bir test aracı kullanarak yeni bir bağlantı başlatın.
2. Ağ panelinde Sınırlama yok'u seçin ve bağlantı üzerinden bir mesaj gönderin.
3. Çok yavaş bir özel sınırlama profili oluşturun (örneğin, 10 kbit/s). Bu tür yavaş bir profil, farkı anlamanıza yardımcı olur.
4. Ağ panelinde profili seçin ve başka bir mesaj gönderin.
5. WS filtresini açın/kapatın, bağlantı adınızı tıklayın, İletiler sekmesini açın ve sınırlama uygulanan ve uygulanmayan gönderilen iletiler ile yansıtılan iletiler arasındaki zaman farkını kontrol edin. Örneğin:

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

Diğer Geliştirici Araçları panellerinde çalışırken ağ bağlantısını sınırlamak istiyorsanız Ağ koşulları çekmecesini kullanın.

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

Tarayıcı çerezlerini manuel olarak temizleme

Tarayıcı çerezlerini istediğiniz zaman manuel olarak temizlemek için İstekler tablosunda herhangi bir yeri 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 başlıklarını 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ç'in işaretini kaldırın.
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ükler 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 tuşlarına basın.
   • Windows veya Linux'ta Control + F tuşlarına basın.

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

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

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

Geliştirici Araçları'nda arama yapmanın tüm yolları hakkında daha fazla bilgi için Arama: Yüklenen tüm kaynaklarda metin bulma başlıklı makaleyi inceleyin.

İstekleri filtreleme

İstekleri özelliklere göre filtreleme

İstekleri alan veya istek boyutu gibi özelliklere göre filtrelemek için Filtre kutusunu kullanın.

Kutuyu göremiyorsanız Filtreler çubuğu gizlenmiş olabilir. Filtreler çubuğunu gizleme başlıklı makaleyi inceleyin.

Filtrenizi ters çevirmek için Filtre kutusunun yanındaki Ters çevir onay kutusunu işaretleyin.

Her bir özelliği boşlukla ayırarak birden fazla özelliği 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 özelliklerin tam listesi verilmiştir.

• cookie-domain. Belirli bir çerez alanını ayarlayan kaynakları gösterin.
• cookie-name. Belirli bir çerez adını ayarlayan kaynakları gösterin.
• cookie-path. Belirli bir çerez yolu ayarlayan kaynakları gösterin.
• cookie-value. Belirli bir çerez değerini ayarlayan kaynakları gösterin.
• domain. Yalnızca belirtilen alandaki kaynakları gösterir. 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, geçersiz kılınan tüm öğeleri (yes) veya geçersiz kılınmayan öğeleri (no) içeren istekleri gösterin. İstek tablosuna ilgili Geçersiz kılınan öğeler var sütununu ekleyebilirsiniz.
• has-response-header. Belirtilen HTTP yanıtı üst bilgisini içeren kaynakları gösterin. Geliştirici Araçları, karşılaştığı tüm yanıt başlıklarıyla otomatik tamamlama açılır listesini doldurur.
• is. WebSocket kaynakları bulmak için is:running simgesini kullanın.
• larger-than. Bayt cinsinden belirtilen boyuttan büyük kaynakları gösterir. 1000 değerini ayarlamak, 1k değerini ayarlamaya eşdeğerdir.
• method. Belirli bir HTTP yöntemi türü üzerinden alınan kaynakları gösterin. Geliştirici Araçları, otomatik tamamlama açılır listesini karşılaştığı tüm HTTP yöntemleriyle doldurur.
• mime-type. Belirtilen MIME türündeki kaynakları gösterir. Geliştirici Araçları, otomatik tamamlama açılır listesini karşılaştığı tüm MIME türleriyle doldurur.
• mixed-content. Tüm karma içerik kaynaklarını (mixed-content:all) veya yalnızca görüntülenenleri (mixed-content:displayed) gösterin.
• priority. Öncelik düzeyi belirtilen değerle eşleşen kaynakları gösterir.
• resource-type. Bir kaynak türünün (ör. resim) kaynaklarını gösterin. Geliştirici Araçları, otomatik tamamlama açılır listesini 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ı tanımlanmış çerezler, Ağ panelinde işaretlenir.
• scheme. Korunmasız HTTP (scheme:http) veya korumalı 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 üstbilgisi olan kaynakları gösterin. Geliştirici Araçları, otomatik tamamlama özelliğini karşılaştığı tüm çerez alanlarıyla doldurur.
• set-cookie-name. Belirtilen değerle eşleşen bir ada sahip Set-Cookie üstbilgisine sahip kaynakları gösterin. Geliştirici Araçları, otomatik tamamlama özelliğini karşılaştığı tüm çerez adlarıyla doldurur.
• set-cookie-value. Belirtilen değerle eşleşen bir değere sahip Set-Cookie üstbilgisi olan kaynakları gösterin. DevTools, otomatik tamamlama özelliğini 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 url kaynaklarını gösterin.

İstekleri türe göre filtreleme

İstekleri kaynak türüne göre filtrelemek için Ağ panelinde Tümü, Getirme/XHR, JS, CSS, Img, 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 gizlenmiş olabilir. Filtre çubuğunu gizleme başlıklı makaleyi inceleyin.

Birden fazla türdeki 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 söz konusu zaman aralığında etkin olan istekleri görüntülemek için Genel Bakış zaman çizelgesinde sola veya sağa sürükleyin. Filtre kapsayıcıdır. Vurgulanan süre boyunca etkin olan tüm istekler gösterilir.

Veri URL'lerini gizleme

Veri URL'leri, diğer dokümanlara yerleştirilmiş küçük dosyalardır. data: ile başlayan ve İstekler tablosunda gördüğünüz tüm istekler bir 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.

En alttaki durum çubuğunda, toplam istek sayısı içinden gösterilen istek sayısı gösterilir.

Uzantı URL'lerini gizleme

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.

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

En alttaki durum çubuğunda, toplam istek sayısı içinden gösterilen istek sayısı gösterilir.

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

Yanıt çerezleri herhangi bir nedenle engellenen 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.

En alttaki durum çubuğunda, toplam istek sayısı içinden gösterilen istek sayısı gösterilir.

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

Ayrıca, Ağ panelinde, Chrome flag'leri veya yapılandırması nedeniyle çerezleri engellenen bir isteğin yanında uyarı uyarı simgesi gösterilir. İpucu içeren bir araç ipucu görmek için simgenin üzerine gelin ve daha fazla bilgi için Sorunlar paneline gitmek üzere simgeyi tıklayın.

Yalnızca engellenen istekleri göster

Engellenen istekler dışındaki her şeyi filtrelemek için Filtreler işlem çubuğunda Diğer filtreler > check_box Engellenen istekler'i seçin. Bunu test etmek için çekmecedeki Ağ isteğini engelleme sekmesini kullanabilirsiniz.

İstekler tablosunda engellenen istekler kırmızı renkte vurgulanır. En alttaki durum çubuğunda, toplam istek sayısı içinden gösterilen istek sayısı gösterilir.

Yalnızca üçüncü taraf isteklerini göster

Sayfa kaynağıyla farklı bir kaynağa sahip istekler dışındaki her şeyi filtrelemek için Filtreler işlem çubuğunda Diğer filtreler > check_box Üçüncü taraf istekleri'ni seçin.

En alttaki durum çubuğunda, toplam istek sayısı içinden gösterilen istek sayısı gösterilir.

Sıralama istekleri

İstekler tablosundaki istekler varsayılan olarak başlatma zamanına göre sıralanır ancak tabloyu başka ölçütlere göre de sıralayabilirsiniz.

Sütuna göre sıralama

İstekleri ilgili sütuna göre sıralamak için İstekler tablosundaki herhangi bir sütunun başlığını tıklayın.

Etkinlik aşamasına göre sıralama

Şelalenin istekleri sıralama şeklini değiştirmek için İstekler tablosunun başlığını sağ tıklayın, imleci Şelale'nin üzerine getirin ve aşağıdaki seçeneklerden birini belirleyin:

• Başlangıç zamanı. Başlatılan ilk istek en üstte yer alır.
• Yanıt süresi. İndirme işlemini başlatan ilk istek en üstte yer alır.
• Bitiş zamanı. Tamamlanan ilk istek en üstte yer alır.
• Toplam Süre En kısa bağlantı kurulumuna ve istek / yanıt süresine sahip istek en üstte yer alır.
• Gecikme. Yanıt için en kısa süre bekleyen istek en üstte yer alır.

Bu açıklamalarda, ilgili seçeneklerin en kısadan en uzuna doğru sıralandığı varsayılır. Şelale sütununun başlığını tıkladığınızda sıralama tersine çevrilir.

Bu örnekte, şelale toplam süreye göre sıralanır. Her çubuğun daha açık renkli kısmı, bekleme süresini gösterir. Daha koyu kısım, bayt indirmek için harcanan süreyi gösterir.

İstekleri analiz etme

Geliştirici Araçları açık olduğu sürece tüm istekler Ağ paneline kaydedilir. İstekleri analiz etmek için Ağ panelini kullanın.

İsteklerin günlüğünü görüntüleme

Geliştirici Araçları açıkken yapılan tüm isteklerin günlüğünü görüntülemek için İstekler tablosunu kullanın. İstekleri tıkladığınızda veya fareyle üzerine geldiğinizde bu istekler hakkında daha fazla bilgi gösterilir.

İstekler tablosunda varsayılan olarak aşağıdaki sütunlar gösterilir:

• Ad. Kaynağın dosya adı veya tanımlayıcısı.

• Durum. Bu sütun aşağıdaki değerleri gösterebilir:

  

  • HTTP durum kodu (örneğin, 200 veya 404).
  • Merkezler arası kaynak paylaşımı (CORS) nedeniyle başarısız olan istekler için CORS error.
  • (blocked:origin) yanlış yapılandırılmış üstbilgileri olan istekler için. Neyin yanlış gittiğiyle ilgili ipucu içeren bir ipucu kutusu görmek için imleci bu durum değerinin üzerine getirin.
  • (failed) ve hata mesajı.

• Tür. İstenen kaynağın MIME türü.

• Başlatan. Aşağıdaki nesneler veya işlemler istek başlatabilir:

  • Parser. Chrome'un HTML ayrıştırıcısı.
  • Yönlendirme. HTTP yönlendirmesi
  • Senaryo. Bir JavaScript işlevi.
  • Diğer. Bir bağlantı kullanarak sayfaya gitme veya adres çubuğuna URL girme gibi başka bir işlem ya da eylem.

• Boyut. Sunucu tarafından sağlanan yanıt başlıklarının ve yanıt gövdesinin birleşik boyutu.

• Zaman İsteğin başlangıcından yanıttaki son baytın alınmasına kadar geçen toplam süre.

• Şelale. Her isteğin etkinliğinin görsel dökümü.

Sütun ekleme veya kaldırma

İstekler tablosunun başlığını sağ tıklayın ve gizlemek veya göstermek için bir seçenek belirleyin. Gösterilen seçeneklerin yanında onay işareti bulunur.

Aşağıdaki ek sütunları ekleyebilir veya kaldırabilirsiniz: Yol, URL, Yöntem, Protokol, Şema, Alan adı, Uzak adres, Uzak adres alanı, Başlatan adres alanı, Çerezler, Çerezleri ayarla, Öncelik, Bağlantı kimliği, Geçersiz kılmalar var ve Şelale.

Özel sütun ekleme

İstekler tablosuna özel sütun eklemek için:

1. İstekler tablosunun başlığını sağ tıklayın ve Yanıt Başlıkları > Başlık Sütunlarını Yönet'i seçin.
2. İletişim penceresinde Özel başlık ekle'yi tıklayın, başlığın adını girin ve Ekle'yi tıklayın.

İstekleri satır içi çerçevelere göre gruplandır

Bir sayfadaki satır içi çerçeveler çok sayıda istek başlatıyorsa bu istekleri gruplandırarak istek günlüğünü daha kolay anlaşılır hale getirebilirsiniz.

İstekleri iFrame'lere göre gruplandırmak için Ağ panelinde Ayarlar'ı açın ve check_box Çerçeveye göre gruplandır'ı işaretleyin.

Bir satır içi çerçeve tarafından başlatılan isteği görüntülemek için istek günlüğünde genişletin.

İsteklerin birbirine göre zamanlamasını görüntüleme

İsteklerin birbirleriyle ilişkili zamanlamasını görüntülemek için Şelale'yi kullanın. Varsayılan olarak şelale, isteklerin başlangıç zamanına göre düzenlenir. Bu nedenle, daha solda yer alan istekler, daha sağda yer alanlardan daha önce başlatılmıştır.

Şelale'yi sıralayabileceğiniz farklı yolları görmek için Etkinlik aşamasına göre sıralama bölümüne bakın.

WebSocket bağlantısının mesajlarını analiz etme

WebSocket bağlantısının mesajlarını görüntülemek için:

1. İstekler tablosunun Ad sütununda WebSocket bağlantısının URL'sini tıklayın.
2. Mesajlar sekmesini tıklayın. Tabloda son 100 mesaj gösterilir.

Tabloyu yenilemek için İstekler tablosunun Ad sütununda WebSocket bağlantısının adını tekrar tıklayın.

Tabloda üç sütun bulunur:

• Veri İleti yükü. İleti düz metin ise burada gösterilir. İkili işlem kodları için bu sütunda işlem kodunun adı ve kodu gösterilir. Aşağıdaki işlem kodları desteklenir: Devam Çerçevesi, İkili Çerçeve, Bağlantıyı Kapatma Çerçevesi, Ping Çerçevesi ve Pong Çerçevesi.
• Uzunluk. İleti yükünün bayt cinsinden uzunluğu.
• Zaman İletinin alındığı veya gönderildiği zaman.

Mesajlar türlerine göre renk kodlarıyla gösterilir:

• Giden kısa mesajlar açık yeşil renkte gösterilir.
• Gelen kısa mesajlar beyaz renkte gösterilir.
• WebSocket işlem kodları açık sarı renktedir.
• Hatalar açık kırmızı renkte gösterilir.

Akıştaki etkinlikleri analiz etme

Sunucuların Fetch API, EventSource API ve XHR üzerinden yayınladığı etkinlikleri görüntülemek için:

1. Etkinliklerin yayınlandığı bir sayfada ağ isteklerini kaydetme
2. Ağ'da bir istek seçin ve EventStream sekmesini açın.

Etkinlikleri filtrelemek için EventStream sekmesinin üst kısmındaki filtre çubuğunda bir normal ifade belirtin.

Yakalanan etkinliklerin listesini temizlemek için block Temizle'yi tıklayın.

Yanıt gövdesinin önizlemesini görüntüleme

Yanıt gövdesinin önizlemesini görüntülemek için:

1. İstekler tablosunun Ad sütununda isteğin URL'sini tıklayın.
2. Önizleme sekmesini tıklayın.

Bu sekme en çok resim görüntülemek için kullanışlıdır.

Yanıt gövdesini görüntüleme

Bir isteğin yanıt gövdesini görüntülemek için:

1. İstekler tablosunun Ad sütununda isteğin URL'sini tıklayın.
2. Yanıt sekmesini tıklayın.

HTTP üstbilgilerini görüntüleme

Bir isteğin HTTP başlığı verilerini görüntülemek için:

1. İstekler tablosunda bir isteği tıklayın.
2. Başlıklar sekmesini açın ve Genel, Yanıt Başlıkları, İstek Başlıkları ve isteğe bağlı olarak Erken İpuçları Başlıkları bölümlerine gidin.

Geliştirici Araçları, Genel bölümünde alınan HTTP durum kodunun yanında okunabilir durum mesajını gösterir.

Response Headers (Yanıt Başlıkları) bölümünde, bir başlık değerinin üzerine gelip edit Edit (Düzenle) düğmesini tıklayarak yanıt başlığını yerel olarak geçersiz kılabilirsiniz.

HTTP üst bilgisi kaynağını görüntüleme

Başlıklar sekmesinde başlık adları varsayılan olarak alfabetik sırada gösterilir. HTTP üstbilgisi adlarını alındıkları sırayla görüntülemek için:

1. İlgilendiğiniz isteğin Üstbilgiler sekmesini açın. HTTP üstbilgilerini görüntüleme başlıklı makaleyi inceleyin.
2. İstek Başlığı veya Yanıt Başlığı bölümünün yanındaki kaynağı görüntüle'yi tıklayın.

Geçici başlık uyarısı

Bazen Üstbilgiler sekmesinde Provisional headers are shown... uyarı mesajı gösterilir. Bunun nedeni aşağıdakilerden biri olabilir:

• İstek ağ üzerinden gönderilmedi ancak orijinal istek başlıklarını depolamayan yerel bir önbellekten sunuldu. Bu durumda, tam istek üstbilgilerini görmek için önbelleğe almayı devre dışı bırakabilirsiniz.

• Ağ kaynağı geçerli değil. Örneğin, Console'da fetch("https://jec.fish.com/unknown-url/") komutunu çalıştırın.

Geliştirici Araçları, güvenlik nedeniyle yalnızca geçici başlıkları da gösterebilir.

İstek yükünü görüntüleme

İsteğin yükünü (sorgu dizesi parametreleri ve form verileri) görüntülemek için İstekler tablosundan bir istek seçin ve Yük sekmesini açın.

Yük kaynağını görüntüleme

Geliştirici Araçları, varsayılan olarak yükü okunabilir bir biçimde gösterir.

Sorgu dizesi parametrelerinin ve form verilerinin kaynaklarını görüntülemek için Yük sekmesinde Sorgu Dizesi Parametreleri veya Form Verileri bölümlerinin yanındaki kaynağı görüntüle'yi tıklayın.

Sorgu dizesi parametrelerinin URL kodu çözülmüş bağımsız değişkenlerini görüntüleme

Bağımsız değişkenler için URL kodlamayı açmak veya kapatmak üzere Yük sekmesinde Kodu çözülmüş olarak göster veya URL kodlu olarak göster'i tıklayın.

Çerezleri görüntüleme

Bir isteğin HTTP başlığında gönderilen çerezleri görüntülemek için:

1. İstekler tablosunun Ad sütununda isteğin URL'sini tıklayın.
2. Cookies (Çerezler) sekmesini tıklayın.

Sütunların açıklamaları için Alanlar bölümüne bakın.

Çerezleri değiştirmek için Çerezleri görüntüleme, düzenleme ve silme başlıklı makaleyi inceleyin.

İsteğin zamanlama dökümünü görüntüleme

Bir isteğin zamanlama dökümünü görüntülemek için:

1. İstekler tablosunun Ad sütununda isteğin URL'sini tıklayın.
2. Zamanlama sekmesini tıklayın.

Bu verilere daha hızlı erişmek için Zamanlama dökümünü önizleme başlıklı makaleyi inceleyin.

Zamanlama sekmesinde görebileceğiniz her aşama hakkında daha fazla bilgi için Zamanlama dökümü aşamaları açıklanıyor başlıklı makaleyi inceleyin.

Zamanlama dökümünü önizleme

Bir isteğin zamanlama dökümünün önizlemesini görüntülemek için İstekler tablosunun Şelale sütunundaki isteğin girişinin üzerine gelin.

Bu verilere fareyle üzerine gelmeyi gerektirmeyen bir şekilde erişmek için İsteğin zamanlama dökümünü görüntüleme başlıklı makaleyi inceleyin.

Zamanlama dökümü aşamaları hakkında

Zamanlama sekmesinde görebileceğiniz her aşama hakkında daha fazla bilgi:

• Sıraya alma. Tarayıcı, bağlantı başlamadan önce ve şu durumlarda istekleri sıraya alır:
  • Daha yüksek öncelikli istekler var. İstek önceliği, kaynağın türü ve dokümandaki konumu gibi faktörlere göre belirlenir. Daha fazla bilgi için fetchpriority kılavuzunun kaynak önceliği bölümünü okuyun.
  • Bu kaynak için zaten altı TCP bağlantısı açık. Bu, sınır değerdir. (Yalnızca HTTP/1.0 ve HTTP/1.1 için geçerlidir.)
  • Tarayıcı, disk önbelleğinde kısa süreliğine alan ayırıyor.
• Durduruldu. İstek, bağlantı başladıktan sonra Kuyruğa alma bölümünde açıklanan nedenlerden herhangi biriyle duraklatılabilir.
• DNS Arama Tarayıcı, isteğin IP adresini çözümlüyor.
• İlk bağlantı. Tarayıcı, TCP el sıkışmaları veya yeniden denemeler ve SSL görüşmesi dahil olmak üzere bir bağlantı kuruyor.
• Proxy pazarlığı. Tarayıcı, isteği bir proxy sunucuyla görüşüyor.
• İstek gönderildi. İstek gönderiliyor.
• ServiceWorker Hazırlığı. Tarayıcı, hizmet çalışanını başlatıyor.
• ServiceWorker'a istek. İstek, hizmet çalışanına gönderilir.
• Bekleniyor (TTFB) Tarayıcı, yanıtın ilk baytını bekliyor. TTFB, Time To First Byte (İlk Bayta Geçiş Süresi) anlamına gelir. Bu süre, 1 gidiş dönüş gecikmesini ve sunucunun yanıtı hazırlamak için harcadığı süreyi içerir.
• İçerik İndirme Tarayıcı, yanıtı doğrudan ağdan veya bir hizmet çalışanından alıyor. Bu değer, yanıt gövdesini okumak için harcanan toplam süredir. Beklenenden büyük değerler, ağın yavaş olduğunu veya tarayıcının yanıtın okunmasını geciktiren başka işler yaptığını gösterebilir.

Başlatanları ve bağımlıları görüntüleme

Bir isteğin başlatıcılarını ve bağımlılıklarını görüntülemek için Üst Karakter tuşunu basılı tutun ve İstekler tablosunda isteğin üzerine gelin. Geliştirici Araçları, başlatıcıları yeşil, bağımlılıkları ise kırmızı renkte gösterir.

İstekler tablosu kronolojik olarak sıralandığında, fareyle üzerine geldiğiniz isteğin üzerindeki ilk yeşil istek, bağımlılığı başlatan istektir. Bunun üzerinde başka bir yeşil istek varsa bu daha yüksek istek, başlatıcının başlatıcısıdır. Örnekler çoğaltılabilir.

Yükleme etkinliklerini görüntüleme

DevTools, DOMContentLoaded ve load etkinliklerinin zamanlamasını Ağ panelinin birden fazla yerinde gösterir. DOMContentLoaded etkinliği mavi, load etkinliği ise kırmızı renkte gösterilir.

Toplam istek sayısını görüntüleme

Toplam istek sayısı, Ağ panelinin alt kısmındaki durum çubuğunda listelenir.

Dikkat: Dikkat: Bu sayı yalnızca Geliştirici Araçları açıldıktan sonra günlüğe kaydedilen istekleri izler. Geliştirici Araçları açılmadan önce başka istekler gerçekleştiyse bu istekler sayılmaz.

Aktarılan ve yüklenen kaynakların toplam boyutunu görüntüleme

DevTools, aktarılan ve yüklenen (sıkıştırılmamış) kaynakların toplam boyutunu Ağ panelinin altındaki durum çubuğunda listeler.

Dikkat: Dikkat: Bu sayı yalnızca Geliştirici Araçları açıldıktan sonra günlüğe kaydedilen istekleri izler. Geliştirici Araçları açılmadan önce başka istekler gerçekleştiyse bu istekler sayılmaz.

Tarayıcı kaynakları sıkıştırmayı açtıktan sonra ne kadar yer kapladıklarını görmek için Bir kaynağın sıkıştırılmamış boyutunu görüntüleme başlıklı makaleyi inceleyin.

İsteğe neden olan yığın izlemeyi görüntüleme

Bir JavaScript ifadesi, kaynağın istenmesine neden olduğunda isteğe yol açan yığın izlemesini görüntülemek için Başlatan sütununun üzerine gelin.

Bir kaynağın sıkıştırılmamış boyutunu görüntüleme

Ayarlar > Büyük istek satırları'nı kontrol edin ve Boyut sütununun alt kısmındaki değere bakın.

Bu örnekte, ağ üzerinden gönderilen www.google.com belgesinin sıkıştırılmış boyutu 43.8 KB, sıkıştırılmamış boyutu ise 136 KB'dır.

İstek verilerini dışa aktarma

Filtreler uygulanmış istek listesini, aşağıda açıklanan çeşitli yöntemlerle dışa aktarabilir veya kopyalayabilirsiniz.

Tüm ağ isteklerini bir HAR dosyasına kaydetme

HAR (HTTP Arşivi), yakalanan verileri dışa aktarmak için çeşitli HTTP oturumu araçlarının kullandığı bir dosya biçimidir. Biçim, belirli bir dizi alanı bulunan bir JSON nesnesidir.

Hassas bilgilerin yanlışlıkla sızdırılma olasılığını azaltmak için varsayılan olarak Cookie, Set-Cookie ve Authorization başlıkları gibi hassas bilgileri hariç tutan "temizlenmiş" ağ günlüğünü HAR biçiminde dışa aktarabilirsiniz. Gerekirse günlüğü hassas verilerle birlikte de dışa aktarabilirsiniz.

Tüm ağ isteklerini bir HAR dosyasına kaydetmek için iki yöntemden birini seçin:

• İstekler tablosunda herhangi bir isteği sağ tıklayın ve Kopyala > Listelenen tümünü HAR olarak kaydet (temizlenmiş) veya Listelenen tümünü HAR olarak kaydet (hassas verilerle)'i seçin.

  

• Ağ panelinin üst kısmındaki işlem çubuğunda indir HAR'yi dışa aktar (temizlenmiş)... seçeneğini tıklayın.

  Hassas verilerle dışa aktarmak için önce ayarlar Ayarlar > Tercihler > Ağ > check_box Hassas verilerle HAR oluşturmaya izin ver'i etkinleştirin, ardından download Dışa aktar düğmesini tıklayın ve açılır menüden HAR'ı dışa aktar (hassas verilerle)'ı seçin.

  

HAR dosyanız olduğunda, analiz için iki şekilde Geliştirici Araçları'na geri aktarabilirsiniz:

• HAR dosyasını İstekler tablosuna sürükleyip bırakın.
• Ağ panelinin üst kısmındaki işlem çubuğunda yükle HAR'ı içe aktar'ı tıklayın.

Not: Ağ paneli, HAR dosyalarından içe aktarılan istekler için başlatanları okur ve gösterir.

Bir isteği, filtrelenmiş bir istek grubunu veya tüm istekleri panoya kopyalama

İstekler tablosunun Ad sütununda bir isteği sağ tıklayın, imleci Kopyala'nın üzerine getirin ve aşağıdaki seçeneklerden birini belirleyin.

Tek bir isteği, yanıtını veya yığın izini kopyalamak için:

• URL'yi kopyala'yı tıklayın. İsteğin URL'sini panoya kopyalayın.
• cURL olarak kopyala'yı tıklayın. İsteği cURL komutu olarak kopyalayın.
• PowerShell olarak kopyala'yı seçin. İsteği PowerShell komutu olarak kopyalayın.
• Fetch olarak kopyala'yı tıklayın. İsteği fetch çağrısı olarak kopyalayın.
• Getirme (Node.js) olarak kopyala'yı tıklayın. İsteği Node.js getirme çağrısı olarak kopyalayın.
• Yanıtı kopyalama. Yanıt gövdesini panoya kopyalayın.
• Yığın izlemeyi kopyalayın. İsteğin yığın izlemesini panoya kopyalayın.

Tüm istekleri kopyalamak için:

• Tüm URL'leri kopyala: Tüm isteklerin URL'lerini panoya kopyalar.
• Tümünü cURL olarak kopyala'yı tıklayın. Tüm istekleri bir cURL komutları zinciri olarak kopyalayın.
• Tümünü PowerShell olarak kopyala'yı seçin. Tüm istekleri bir PowerShell komutları zinciri olarak kopyalayın.
• Tümünü fetch olarak kopyala'yı tıklayın. Tüm istekleri bir fetch çağrıları zinciri olarak kopyalar.
• Tümünü fetch olarak kopyalayın (Node.js). Tüm istekleri Node.js fetch çağrıları zinciri olarak kopyalayın.
• Tümünü HAR (temizlenmiş) olarak kopyala. Tüm istekleri Cookie, Set-Cookie ve Authorization üst bilgileri gibi hassas veriler olmadan HAR verileri olarak kopyalayın.
• Tümünü HAR olarak (hassas verilerle) kopyala'yı tıklayın. Tüm istekleri hassas verilerle birlikte HAR verileri olarak kopyalayın.

Filtrelenmiş bir istek grubunu kopyalamak için ağ günlüğüne bir filtre uygulayın, bir isteği sağ tıklayın ve şunlardan birini seçin:

• Listelenen tüm URL'leri kopyalayın. Filtrelenmiş tüm isteklerin URL'lerini panoya kopyalayın.
• Listelenen tüm öğeleri cURL olarak kopyalayın. Filtrelenen tüm istekleri bir cURL komutları zinciri olarak kopyalayın.
• Listelenen tüm öğeleri PowerShell olarak kopyalayın. Filtrelenmiş tüm istekleri bir PowerShell komutları zinciri olarak kopyalayın.
• Listelenen tüm öğeleri fetch olarak kopyalayın. Filtrelenmiş tüm istekleri bir fetch çağrıları zinciri olarak kopyalayın.
• Listelenen tüm öğeleri fetch (Node.js) olarak kopyalayın. Filtrelenmiş tüm istekleri Node.js fetch çağrıları zinciri olarak kopyalayın.
• Listelenen tüm istekleri HAR (temizlenmiş) olarak kopyalayın. Filtrelenen tüm istekleri Cookie, Set-Cookie ve Authorization üstbilgileri gibi hassas veriler olmadan HAR verileri olarak kopyalayın.
• Listelenen tüm istekleri HAR olarak (hassas verilerle) kopyala'yı tıklayın. Filtrelenen tüm istekleri hassas verilerle birlikte HAR verileri olarak kopyalayın.

Ağ panelinin düzenini değiştirme

Ağ paneli kullanıcı arayüzünün bölümlerini genişleterek veya daraltarak sizin için önemli olan noktalara odaklanın.

Filtreler işlem çubuğunu gizleme

Geliştirici Araçları, varsayılan olarak Ağ panelinin üst kısmında Filtreler çubuğu'nu gösterir. Gizlemek için filter_alt Filtrele'yi tıklayın.

Geniş istek satırları kullanma

Ağ istekleri tablonuzda daha fazla boşluk istediğinizde büyük satırları kullanın. Bazı sütunlar, büyük satırlar kullanılırken biraz daha fazla bilgi de sağlar. Örneğin, Boyut sütununun alt değeri, bir isteğin sıkıştırılmamış boyutudur. Öncelik sütununda ise hem ilk (alt değer) hem de son (üst değer) getirme önceliği gösterilir.

Ayarlar'ı açın ve büyük satırları görmek için Büyük istek satırları'nı tıklayın.

Genel Bakış parçasını gizleme

DevTools, varsayılan olarak Genel Bakış parçasını gösterir. Ayarlar'ı açın ve Genel bakışı göster onay kutusunu temizleyerek gizleyin.