Ağ özellikleri referansı

Chrome Geliştirici Araçları'nın bu kapsamlı referansında, sayfanızın nasıl yüklendiğini analiz etmenin yeni yollarını keşfedin özelliklerini anlatacağım.

Ağ isteklerini kaydet

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

Ağ isteklerini kaydetmeyi durdur

İstek kaydetmeyi durdurmak için:

• Ağ günlüğünü kaydetmeyi durdur'u tıklayın. Ağ panelinde görüntülenebilir. Geliştirici Araçları'nın artık istekleri kaydetmediğini belirtmek için simge gri renge döner.
• Command tuşuna basın. + E (Mac) veya Control + E (Windows, Linux) tuşuna basarak Ağ paneli odaktasınız.

İstekleri temizle

Temizle'yi tıklayın. Ağ panelindeki İstekler tablosundan tüm istekleri temizleyin.

Sayfa yüklemelerinde istekleri kaydet

Sayfa yüklemelerinde istekleri kaydetmek için Ağ panelindeki Günlüğü koru onay kutusunu işaretleyin. Geliştirici Araçları, siz Günlüğü koru özelliğini devre dışı bırakana kadar tüm istekleri kaydeder.

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

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

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

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

Yakaladıktan sonra ekran görüntüleriyle aşağıdaki şekillerde etkileşimde bulunabilirsiniz:

• Bir ekran görüntüsünün alındığı yeri görüntülemek için fareyle ekran görüntüsünün üzerine gelin. Sarı çizgi Genel Bakış bölmesinde görünür.
• Ekran görüntüsü alma işleminden sonra gerçekleşen istekleri filtrelemek için ekran görüntüsünün küçük resmini tıklayın. emin olun.
• Yakınlaştırmak için küçük resmi çift tıklayın.

XHR isteğini tekrar oynat

Bir XHR isteğini tekrar 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 tekrar oynat seçeneğini belirleyin.

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

Tarayıcı önbelleğini devre dışı bırakarak ilk kez gelen ziyaretçi emülasyonu

Sitenizi ilk kez ziyaret eden bir kullanıcının sitenizi nasıl deneyimleyeceğini görmek 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 yöntem, ilk kez gelen bir kullanıcının deneyimini daha doğru bir şekilde emüle eder. Bunun nedeni, isteklerin tekrarlayan ziyaretlerde tarayıcı önbelleğinden sunulmasıdır.

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 isterseniz Ağ koşullarını kullanın çekmecesi.

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ışı emülasyon

Çevrimdışı çalışabilen, Progresif Web Uygulamaları (pwa) adında yeni bir web uygulamaları sınıfı var. Service çalışanları'ndan yardım alabilirsiniz. Bu tür bir uygulama geliştirirken, uygulamanın adının veri bağlantısı olmayan bir cihazı hızlı bir şekilde simüle eder.

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

Geliştirici Araçları, çevrimdışı özelliğinin etkinleştirildiğini hatırlatmak için Ağ sekmesinin yanında bir uyarı simgesi görüntüler.

Yavaş ağ bağlantısı emülasyonu

Hızlı 4G, yavaş 4G veya 3G emülasyonunu kullanmak için üstteki işlem çubuğunda bulunan Hızlandırma açılır menüsünden ilgili hazır ayarı seçin.

Geliştirici Araçları, kısıtlamanın etkinleştirildiğini hatırlatmak için Ağ panelinin yanında bir uyarı uyarı simgesi görüntüler.

Özel kısıtlama profilleri oluşturma

Yavaş veya hızlı 4G gibi hazır ayarlara ek olarak kendi özel kısıtlama profilleri:

1. Throttling menüsünü açın ve Özel > Ekle....
2. Ayarlar Ayarlar > bölümünde açıklandığı şekilde yeni bir kısıtlama profili oluşturun Hızlandırma.

3. Tekrar Ağ paneline gelin, Hızlandırma açılır menüsünden yeni profilinizi seçin.

   

Geliştirici Araçları, kısıtlamanın etkinleştirildiğini hatırlatmak için Ağ panelinin yanında bir uyarı simgesi görüntüler.

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

Geliştirici Araçları, HTTP isteklerine ek olarak sürüm 99'dan itibaren WebSocket bağlantılarını da kısıtlar.

WebSocket kısıtlamasını gözlemlemek için:

1. Örneğin, bir test aracı kullanarak yeni bir bağlantı başlatın.
2. Ağ panelinde Kısıtlama yok'u seçin ve bağlantı üzerinden bir mesaj gönderin.
3. 10 kbit/s gibi çok yavaş bir özel kısıtlama profili oluşturun. Bu kadar yavaş bir profil, farkı görmenize yardımcı olacaktır.
4. Ağ panelinde profili seçin ve başka bir mesaj gönderin.
5. WS filtresini açın, bağlantınızın adını tıklayın, Messages (Mesajlar) sekmesini açın, ardından kısıtlama uygulanmış ve kısıtlama olmadan gönderilen ve yankılanan iletiler arasındaki saat farkını kontrol edin. Örneğin:

Ağ koşulları çekmecesinden yavaş ağ bağlantılarının emülasyonu

Diğer Geliştirici Araçları panellerinde çalışırken ağ bağlantısını daraltmak isterseniz Ağ koşulları çekmecesi.

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 temizleyin.

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

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

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

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 seçenek girin.

İstekleri filtreleyin

İstekleri mülklere göre filtreleyin

İstekleri web sitesinin alanı veya boyutu gibi özelliklere göre filtrelemek için Filtre isteği gönderin.

Kutuyu göremiyorsanız Filtreler bölmesi büyük olasılıkla gizlidir. Filtreler bölmesini gizleme başlıklı makaleyi inceleyin.

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

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

Desteklenen özelliklerin tam listesi aşağıda verilmiştir.

• cookie-domain Belirli bir çerez alan adını ayarlayan kaynakları gösterir.
• cookie-name Belirli bir çerez adını belirleyen kaynakları gösterir.
• cookie-path Belirli bir çerez yolunu belirleyen kaynakları gösterin.
• cookie-value Belirli bir çerez değeri belirleyen kaynakları gösterir.
• domain Yalnızca belirtilen alandaki kaynakları görüntüleyin. Joker karakter kullanabilirsiniz (*) birden fazla alan adı dahil etmek isteyebilirsiniz. Örneğin, *.com uzantısında, .com içinde. Geliştirici Araçları, otomatik tamamlama açılır menüsünü tüm alan adlarını içeren karşılaşacaksınız.
• has-overrides content, headers, tüm geçersiz kılmalar (yes) veya geçersiz kılma içermeyen (no) istekleri geçersiz kılınan istekleri göster. İstek tablosuna ilgili Geçersiz kılmalar içeriyor sütununu ekleyebilirsiniz.
• has-response-header Belirtilen HTTP yanıt başlığını içeren kaynakları gösterir. Geliştirici Araçları, otomatik tamamlama açılır menüsünü, sahip olduğu tüm yanıt başlıklarıyla karşılaşılır.
• is WebSocket kaynak bulmak için is:running kullanın.
• larger-than Belirtilen boyuttan daha büyük olan kaynakları bayt cinsinden gösterir. Değer ayarlama 1000 değeri, 1k değerini ayarlamaya eşdeğerdir.
• method Belirli bir HTTP yöntemi türü üzerinden alınan kaynakları gösterir. Geliştirici Araçları alanları açılır menüsünde, karşılaştığı tüm HTTP yöntemlerine yer verir.
• mime-type Belirtilen MIME türünün kaynaklarını gösterir. Geliştirici Araçları, otomatik tamamlama açılır menüsünü doldurur karşılaştığı tüm MIME türleriyle birlikte çalışır.
• mixed-content Tüm karma içerik kaynakları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österir.
• resource-type Bir kaynak türündeki kaynakları (ör. resim) gösterin. Geliştirici Araçları, otomatik tamamlama açılır menüsünü kullanarak, karşılaştığı tüm kaynak türlerini görebilirsiniz.
• response-header-set-cookie Sorunlar sekmesinde ham Set-Cookie üstbilgilerini göster. Bozuk çerezler Yanlış Set-Cookie başlıklarına sahip olanlar Ağ panelinde işaretlenir.
• scheme Korumasız HTTP (scheme:http) veya korunan HTTPS üzerinden alınan kaynakları göster (scheme:https).
• set-cookie-domain Domain özelliğine sahip Set-Cookie başlığı olan kaynakları göster eşleşen bir etiket ekleyin. Geliştirici Araçları, otomatik tamamlamayı tüm çerezle doldurur en fazla bir bölümünü belirtir.
• set-cookie-name Şununla eşleşen bir Set-Cookie başlığına sahip kaynakları göster: belirtilen değer. Geliştirici Araçları, otomatik tamamlamayı sahip olduğu tüm çerez adlarıyla doldurur karşılaşılır.
• set-cookie-value Eşleşen bir değere sahip Set-Cookie üstbilgisine sahip kaynakları göster belirtilen değer. Geliştirici Araçları, otomatik tamamlamayı, içerdiği tüm çerez değerleriyle doldurur karşılaşılır.
• status-code Yalnızca HTTP durum kodu belirtilen kodla eşleşen kaynakları göster. 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 öğesine sahip kaynakları gösterir.

İstekleri türe göre filtreleyin

İstekleri istek türüne göre filtrelemek için Tümü, Getirme/XHR, JS, CSS, Img, Medya'yı tıklayın. Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest veya Diğer (burada listelenmeyen diğer tüm türler) Ağ panelindeki düğmeyi tıklayın.

Bu düğmeleri göremiyorsanız Filtreler bölmesi muhtemelen gizlidir. Bkz. Filtreleri gizleme bölmesini tıklayın.

Birden çok tür filtresini aynı anda etkinleştirmek için Command (Mac) veya Control (Windows, Linux) tuşunu basılı tutarken ve ardından tıklayın.

İstekleri zamana göre filtrele

Yalnızca şu süre içinde etkin olan istekleri görüntülemek için Genel Bakış bölmesinde sola veya sağa sürükleyin karar verebilirsiniz. Filtre kapsayıcıdır. Vurgulanan zamanda etkin olan istekler gösteriliyor.

Veri URL'lerini gizle

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

Bu istekleri gizlemek için Veri URL'lerini gizle seçeneğini işaretleyin.

Alt kısımdaki durum çubuğunda gösterilen isteklerin toplam sayıya göre sayısı gösterilir.

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ı isteklerinde chrome-extension:// ile başlayan URL'ler var.

Uzantı isteklerini gizlemek için Uzantı URL'lerini gizle seçeneğini işaretleyin.

Alt kısımdaki durum çubuğunda gösterilen isteklerin toplam sayıya göre sayısı gösterilir.

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

Herhangi bir nedenle yanıt çerezlerinin engellendiği istekler hariç her şeyi filtrelemek için Engellenen yanıt çerezleri seçeneğini işaretleyin. Bu demo sayfasında deneyin.

Alt kısımdaki durum çubuğunda gösterilen isteklerin toplam sayıya göre sayısı gösterilir.

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

Ayrıca Ağ panelinde, üçüncü taraf çerezlerinin kullanımdan kaldırılmasından etkilenen veya bundan muaf tutulan bir isteğin yanında uyarı uyarısı simgesi görünür. İpucu içeren bir ipucu görmek için fareyle 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 hariç her şeyi filtrelemek için Engellenen istekler'i işaretleyin. Bunu test etmek için Ağ isteği engelleme çekmecesi sekmesini kullanabilirsiniz.

İstekler tablosunda engellenen istekler kırmızı renkle vurgulanır. Alt kısımdaki durum çubuğunda gösterilen isteklerin toplam sayıya göre sayısı gösterilir.

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

Sayfa kaynağından farklı kaynağa sahip istekler hariç her şeyi filtrelemek için 3. taraf isteklerini işaretleyin. Bu demo sayfasında deneyin.

Alt kısımdaki durum çubuğunda gösterilen isteklerin toplam sayıya göre sayısı gösterilir.

Sıralama istekleri

Varsayılan olarak, İstekler tablosundaki istekler başlatma zamanına göre sıralanır ancak başka ölçütler kullanarak tabloda görebilirsiniz.

Sütuna göre sırala

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

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

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

• Başlangıç Zamanı. Başlatılan ilk istek en üsttedir.
• Yanıt Süresi. İndirme işlemine başlayan ilk istek en üstte yer alır.
• Bitiş Zamanı. Tamamlanan ilk istek en üsttedir.
• Toplam Süre. En kısa bağlantı kurulumuna ve istek / yanıt zamanına sahip istek dokunun.
• Gecikme. Yanıt için en kısa süre bekleyen istek en üstte gösterilir.

Bu açıklamalarda, her bir seçeneğin en kısadan en uzuna doğru sıralandığı varsayılmıştır. Tıklama Şelale sütununun başlığındaki sıra, tersine çevrilir.

Bu örnekte, Şelale toplam süreye göre sıralanır. Her çubuğun daha hafif kısmı zaman beklemeye harcadınız. Karanlık kısım ise baytları indirmek için harcanan zamandır.

İstekleri analiz edin

Geliştirici Araçları açık olduğu sürece tüm istekleri Ağ paneline kaydeder. Ağ panelini kullanarak olanak sağlar.

İstek 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. Tıklayarak veya isteklerin üzerine geldiğinizde bunlar hakkında daha fazla bilgi görüntülenir.

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

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

• Durum. Bu sütunda aşağıdaki değerler gösterilebilir:

  

  • HTTP durum kodu (örneğin, 200 veya 404).
  • Kaynaklar Arası Kaynak Paylaşımı (CORS) nedeniyle istekler için CORS error başarısız oldu.
  • Yanlış yapılandırılmış başlıkları olan istekler için (blocked:origin). Ne tür bir sorun olduğuna dair ipucu içeren bir ipucu görmek için fareyle bu durum değerinin üzerine gelin.
  • (failed) ve ardından hata mesajı.

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

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

  • Ayrıştırıcı. Chrome'un HTML ayrıştırıcısı.
  • Yönlendirme. HTTP yönlendirmesi.
  • Komut dosyası. JavaScript işlevi.
  • Diğer. Bağlantı kullanarak bir sayfaya gitme veya bir görebilirsiniz.

• Boyut. Yanıt üstbilgileri ile yanıt gövdesinin toplam boyutu; sunucu.

• Zaman. İsteğin başlangıcından yanıt verelim.

• Şelale. Her istek 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şaretleri vardır.

Şu ek sütunları ekleyebilir veya kaldırabilirsiniz: Yol, URL, Yöntem, Protokol, Şema, Alan, Uzak adres, Uzak adres alanı, Başlatıcı adres alanı, Çerezler, Çerez ayarla, Öncelik, Bağlantı Kimliği, Geçersiz kılmalar var ve Şelale.

Özel sütunlar ekleyin

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

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

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

Bir sayfadaki satır içi çerçeveler çok sayıda istek başlatırsa bunları gruplandırarak istek günlüğünü daha uygun hale getirebilirsiniz.

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

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

İsteklerin zamanlamasını birbiriyle ilişkili olarak görüntüleme

İsteklerin zamanlamasını birbiriyle ilişkili olarak görüntülemek için Şelale'yi kullanın. Varsayılan olarak Şelale, isteklerin başlangıç zamanına göre düzenlenir. Daha solda olan istekler önceki kontrollerden daha erken başlamıştır.

Şelale'yi sıralamanın farklı yollarını görmek için Etkinlik aşamasına göre sıralama başlıklı makaleye bakın.

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

Bir WebSocket bağlantısının iletilerini 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. Tablo son 100 mesajı gösterir.

Tabloyu yenilemek için İstekler tablosu.

Tabloda üç sütun bulunur:

• Veriler. Mesaj yükü. İleti düz metinse burada gösterilir. İkili program için işlem kodlarının adı ve kodu bu sütunda görüntülenir. Aşağıdaki işlem kodları desteklenir: Devamlılık Çerçevesi, İkili Program Çerçevesi, Bağlantı Kapanış Çerçevesi, Ping Çerçevesi ve Pong Çerçevesi.
• Uzunluk. Mesaj yükünün bayt cinsinden uzunluğu.
• Zaman. İletinin alındığı veya gönderildiği zaman.

İletiler türlerine göre renklerle kodlanır:

• Giden kısa mesajlar açık yeşildir.
• Gelen kısa mesajlar beyaz renktedir.
• WebSocket işlem kodları açık sarıdır.
• Hatalar açık kırmızıdır.

Akıştaki etkinlikleri analiz etme

Sunucuların Getirme API'si, EventSource API'si ve XHR üzerinden akış gerçekleştirdiği etkinlikleri görüntülemek için:

1. Etkinlik akışı sağlayan bir sayfada ağ isteklerini kaydedin. Örneğin, bu demo sayfasını açıp üç düğmeden birini tıklayın.
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 normal ifade belirtin.

Yakalanan etkinliklerin listesini temizlemek için engelle 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ütunu altından isteğin URL'sini tıklayın.
2. Önizleme sekmesini tıklayın.

Bu sekme çoğunlukla resimleri 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ütununun altından 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ık verilerini görüntülemek için:

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

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

Yanıt Başlıkları bölümünde, fare imlecini bir üstbilgi değerinin üzerine getirebilir ve yanıt başlığını yerel olarak geçersiz kılmak için düzenle Düzenle düğmesini tıklayabilirsiniz.

HTTP üstbilgi kaynağını görüntüle

Varsayılan olarak, Başlıklar sekmesi başlık adlarını alfabetik olarak gösterir. Şurada HTTP üst bilgisi adlarını görüntülemek için: e-postalara ilişkin soruları cevaplayın:

1. İlgilendiğiniz isteğin Başlıklar sekmesini açın. HTTP üstbilgilerini görüntüleme başlıklı makaleye bakın.
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 başlıklarını görmek için önbelleğe almayı devre dışı bırakabilirsiniz.

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

Geliştirici Araçları, güvenlik nedeniyle yalnızca geçici üstbilgileri de görüntüleyebilir.

İstek yükünü göster

İsteğin yükünü, yani sorgu dizesi parametrelerini ve form verilerini görüntülemek için İstekler tablosundan bir istek seçin ve Yük sekmesini açın.

Yük kaynağını göster

Geliştirici Araçları, varsayılan olarak yükü kullanıcıların okuyabileceği 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üle

Bağımsız değişkenler için URL kodlamasını açıp kapatmak istiyorsanız Yük sekmesinde kodu çözülenleri görüntüle veya URL kodlamalıları göster'i tıklayın.

Çerezleri göster

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

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

Sütunların her birinin açıklaması için Alanlar'ı inceleyin.

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

Bir isteğ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ütunu altından isteğin URL'sini tıklayın.
2. Zamanlama sekmesini tıklayın.

Bu verilere daha hızlı erişmenin bir yolu için Zamanlama dökümünü önizleme bölümüne bakın.

Uyguladığınız aşamaların her biri hakkında daha fazla bilgi için Zamanlama dökümü aşamalarının açıklaması bölümüne bakın Zamanlama sekmesinde görebilirsiniz.

Zamanlama dökümünü önizleme

Bir isteğin zamanlama dökümünü önizlemek için imlecinizi Şelale sütununda görünür.

İhtiyacınız olmayan verilere erişmenin yolu için İsteğin zamanlama dökümünü görüntüleme bölümüne bakın. ekliyorum.

Zamanlama dökümü aşamalarının açıklaması

Zamanlama sekmesinde görebileceğiniz her bir aşama hakkında daha fazla bilgiyi aşağıda bulabilirsiniz:

• Sıraya alma. Tarayıcı, istekleri bağlantı başlamadan önce ve şu durumlarda sıraya alır:
  • Daha yüksek önceliğe sahip istekler var.
  • Bu kaynak için zaten altı TCP bağlantısı açık. Bu sınır sınırdır. Geçerlilik kapsamı: Yalnızca HTTP/1.0 ve HTTP/1.1 için geçerlidir.
  • Tarayıcı, disk önbelleğinde kısa süreliğine yer ayırıyor.
• Durduruldu. Bağlantı başladıktan sonra, Sıraya alma bölümünde açıklanan nedenlerden herhangi biri nedeniyle istek durdurulmuş olabilir.
• DNS Arama. Tarayıcı, isteğin IP adresini çözümliyor.
• İlk bağlantı. Tarayıcı, TCP el sıkışmaları veya yeniden denemeleri de dahil olmak üzere bir bağlantı kuruyor bağlantı kurma ve SSL anlaşması yapma.
• Proxy pazarlığı. Tarayıcı, istek için bir proxy sunucu ile pazarlık yapmaktadır.
• İstek gönderildi. İstek gönderiliyor.
• ServiceWorker Hazırlığı. Tarayıcı, hizmet çalışanını başlatıyor.
• ServiceWorker isteği. İstek, hizmet çalışanına gönderiliyor.
• Bekleniyor (TTFB). Tarayıcı bir yanıtın ilk baytını bekliyor. TTFB, Zaman anlamına gelir İlk Bayt. Bu süreye 1 gidiş dönüş gecikme ve sunucunun açılış ve yanıtı hazırlar.
• İç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. Değerlerin beklenenden büyük olması, ağın yavaş olduğunu veya tarayıcının meşgul olduğu, yanıtın okunmasını geciktirdiği anlamına gelebilir.

Başlatıcıları ve bağımlılıkları 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ı tutarken isteğin İstekler tablosu. Geliştirici Araçları renkleri başlatıcılar yeşil, bağımlılıklar kırmızı.

İstekler tablosu kronolojik olarak sıralandığında, bağımlılığı başlatan unsurdur. Yukarıda başka bir yeşil istek daha varsa daha yüksek olan bu talebin başlatan kişi olduğunu gösterir. Örnekler çoğaltılabilir.

Yükleme etkinliklerini görüntüle

Geliştirici Araçları, DOMContentLoaded ve load etkinliklerinin zamanlamasını Ağ paneli. DOMContentLoaded etkinliği mavi renkli, load etkinliği ise kırmızıdır.

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

Toplam istek sayısı, Ağ panelinin alt kısmındaki Özet bölmesinde listelenir.

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

Geliştirici Araçları, Ağ panelinin alt kısmındaki Özet bölmesinde, aktarılan ve yüklenen (sıkıştırılmamış) kaynakların toplam boyutunu listeler.

Tarayıcı tarafından açtıktan sonra kaynakların ne kadar büyük olduğunu görmek için Bir kaynağın sıkıştırılmamış boyutunu görüntüleme bölümüne bakın.

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

Bir JavaScript ifadesi bir kaynağın istenmesine neden olduğunda fareyle Başlatan sütununun üzerine gelin yığın izlemeyi (stack trace) görüntüleyebilirsiniz.

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

Ayarlar'ı kontrol edin > Büyük istek satırları ve ardından Boyut sütununun alt değerine bakın.

Bu örnekte, ağ üzerinden gönderilen www.google.com dokümanının sıkıştırılmış boyutu 43.8 KB, sıkıştırılmamış boyut 136 KB idi.

İstek verilerini dışa aktarma

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

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

Tüm ağ isteklerini bir HAR dosyasına iki şekilde kaydedebilirsiniz:

• İstekler tablosunda herhangi bir isteği sağ tıklayıp Tümünü içerikle birlikte HAR olarak kaydet'i seçin.
• Ağ panelinin üst kısmındaki işlem çubuğunda HAR'yi dışa aktar'ı tıklayın.

Hazırladığınız HAR dosyasını analiz için iki şekilde Geliştirici Araçları'na aktarabilirsiniz:

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

Bir veya daha fazla isteği panoya kopyala

İstekler tablosunun Ad sütununda bir isteği sağ tıklayın, fare imlecini Kopyala'nın üzerine getirin ve aşağıdakilerden birini seçin:

• URL'yi kopyala. İsteğin URL'sini panoya kopyalayın.
• cURL olarak kopyala. İsteği cURL komutu olarak kopyalayın.
• PowerPoint olarak kopyala. İsteği TPU komutu olarak kopyalayın.
• Getirme olarak kopyala. İsteği bir getirme çağrısı olarak kopyalayın.

• Node.js getirme olarak kopyala. İsteği Node.js getirme çağrısı olarak kopyalayın.

  ---

• Yanıtı kopyala. Yanıt gövdesini panoya kopyalayın.

  ---

• Tüm URL'leri kopyala. Tüm isteklerin URL'lerini panoya kopyalar.

• Tümünü cURL olarak kopyala. Tüm istekleri bir cURL komut zinciri olarak kopyalayın.

• Tümünü PowerPoint olarak kopyalayın. Tüm istekleri JSON komut zinciri olarak kopyalayın.

• Tümünü getirme olarak kopyala. Tüm istekleri, getirme çağrıları zinciri olarak kopyalayın.

• Tümünü Node.js getirme olarak kopyalayın. Tüm istekleri, Node.js getirme çağrı zinciri olarak kopyalayın.

• Tümünü HAR olarak kopyala. Tüm istekleri HAR verileri olarak kopyala.

Ağ panelinin düzenini değiştirme

Sizin için önemli olan noktalara odaklanmak üzere Ağ paneli kullanıcı arayüzünün bölümlerini genişletin veya daraltın.

Filtreler bölmesini gizle

Geliştirici Araçları'nda varsayılan olarak Filtreler bölmesi gösterilir. Filtrele'yi tıklayın. tıklayın.

Büyük istek satırları kullan

Ağ istekleri tablonuzda daha fazla boşluk istediğinizde büyük satırlar kullanın. Bazı sütunlarda büyük satırlar kullanırken biraz daha fazla bilgi sağlar. Örneğin, Boyut sütunu, isteğin sıkıştırılmamış boyutudur ve Öncelik sütunu hem başlangıç (en düşük değer) hem de nihai (en üst değer) getirme önceliğini gösterir.

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ış kanalını gizleme

Geliştirici Araçları, varsayılan olarak Genel Bakış kanalını gösterir. Ayarlar'ı açın ve gizlemek için Genel bakışı göster onay kutusunun işaretini kaldırın.