Ağ özellikleri referansı

Chrome Geliştirici Araçları'nın ağ analizi özellikleriyle ilgili bu kapsamlı referansta sayfa yüklemenizi analiz etmenin yeni yollarını keşfedin.

Ağ isteklerini kaydetme

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

Ağ isteklerini kaydetmeyi durdurma

Kayıt isteklerini durdurmak için:

• Ağ panelinde Ağ günlüğünü 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

Requests (İstekler) tablosundaki tüm istekleri temizlemek için Network (Ağ) panelinde Clear'ı (Temizle) 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 ne gördüğünü analiz etmek için ekran görüntüleri yakalayın.

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

Ekran görüntüsü almak 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 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 istekleri filtrelemek için ekran görüntüsünün küçük resmini tıklayın.
• Küçük resmi çift tıklayarak yakınlaştırın.

İsteği düzenleme ve yeniden gönderme

İstekler tablosundan, getirilebilir ağ isteklerini düzenleyip yeniden gönderebilirsiniz:

1. İsteği sağ tıklayın ve Getirme olarak düzenle ve yeniden gönder'i seçin. Geliştirici Araçları, Konsol çekmecesini açar. İstek, orijinal istek parametrelerini ve yürütme bağlamını koruyarak fetch() çağrısı olarak doldurulur.
2. İsteğe bağlı olarak, Console'da fetch() çağrısını düzenleyin, ardından isteği yeniden göndermek için Enter tuşuna basın.

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

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

İlk kez gelen bir kullanıcının sitenizi nasıl deneyimlediğini 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 kullanan bir kullanıcının deneyimini daha doğru bir şekilde taklit eder. Çünkü istekler, tekrar eden ziyaretlerde tarayıcı önbelleğinden sunulur.

Ağ koşulları çekmecesinden tarayıcı önbelleğine almayı 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 İstekler tablosunda herhangi bir yeri sağ tıklayıp Tarayıcı önbelleğini temizle'yi seçin.

Çevrimdışı emülasyonu

Progresif Web Uygulamaları adı verilen yeni bir web uygulaması sınıfı, hizmet çalışanlarının yardımıyla çevrimdışı çalışabilir. Bu tür bir uygulama geliştirirken veri bağlantısı olmayan bir cihazı hızlı bir şekilde 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ğ sınırlama açılır menüsünden Çevrimdışı'yı 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'yi taklit etmek için üstteki işlem çubuğunda bulunan Kısıtlama açılır menüsünden ilgili hazır ayarı seçin.

Performans panelinde Saha metrikleri'ni etkinleştirdiyseniz menüdeki kısıtlama seçeneklerinden biri, Chrome Kullanıcı Deneyimi Raporu verilerine göre önerilen olarak işaretlenebilir.

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 ayarların yanı sıra kendi özel kısıtlama profillerinizi de ekleyebilirsiniz:

1. Throttling (Kısıtlama) menüsünü açın ve Custom (Özel) > Add... (Ekle...) seçeneğini belirleyin.
2. Ayarlar Ayarlar > Sınırlama bölümünde açıklandığı şekilde yeni bir sınırlama profili oluşturun.

3. Ağ paneline geri dönüp Kısıtlama açılır menüsünden yeni profilinizi 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.

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

Geliştirici Araçları, 99 sürümünden itibaren HTTP isteklerinin yanı sıra 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 Sınırlama yok'u seçin ve bağlantı üzerinden bir ileti gönderin.
3. Çok yavaş bir özel kısıtlama profili oluşturun (örneğin, 10 kbit/s). 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/kapatın, bağlantı adınızı tıklayın, Messages (İletiler) sekmesini açın ve sınırlama uygulanan ve uygulanmayan gönderilmiş iletiler ile yansıtılmış 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ı 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ğ 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ısayolu kullanın:

   • macOS'te Command + F tuşlarına basın.
   • Windows veya Linux'ta Ctrl + 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 harfe duyarlılığı 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 block Temizle'yi tıklayın.

Geliştirici Araçları'nda 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 özelliklere göre filtreleme

İstekleri, alan adı veya istek boyutu gibi özelliklere göre filtrelemek için Filtre kutusunu kullanın ya da aynı site istekleri de dahil olmak üzere istek URL'si, alan adı, ana makine adı veya bağlantı noktasıyla (ör. localhost veya example.com) eşleşecek bir metin dizesi girin.

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

Filtrenizi tersine çevirmek için Filtre kutusunun yanındaki Tersine ç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.

Desteklenen özelliklerin tam listesini aşağıda bulabilirsiniz.

• cookie-domain. Belirli bir çerez alanı ayarlayan kaynakları gösterin.
• cookie-name. Belirli bir çerez adı ayarlayan kaynakları gösterin.
• cookie-path. Belirli bir çerez yolu ayarlayan kaynakları gösterir.
• cookie-value. Belirli bir çerez değeri ayarlayan kaynakları gösterir.
• domain. Yalnızca belirtilen alandaki kaynakları gösterir. Birden fazla alan 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 alanlarla doldurur.
• has-overrides. content, headers, herhangi bir geçersiz kılma (yes) veya geçersiz kılma olmayan (no) istekleri gösterin. İlgili Geçersiz kılma var sütununu istek tablosuna ekleyebilirsiniz.
• has-response-header. Belirtilen HTTP yanıt başlığını içeren kaynakları gösterin. Geliştirici Araçları, otomatik tamamlama açılır listesini 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. Belirtilen boyuttan (bayt cinsinden) daha büyük kaynakları gösterir. 1000 değerini ayarlamak, 1k değerini ayarlamakla aynıdır.
• method. Belirli bir HTTP yöntemi türü üzerinden alınan kaynakları gösterir. 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österir. 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 üstbilgilerini gösterin. Hatalı biçimlendirilmiş ve yanlış Set-Cookie üstbilgilerine sahip çerezler, Ağ panelinde işaretlenir.
• scheme. Korunmayan HTTP (scheme:http) veya korunan HTTPS (scheme:https) üzerinden alınan kaynakları gösterir.
• set-cookie-domain. Belirtilen değerle eşleşen bir Domain özelliğine sahip Set-Cookie başlığına sahip 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 başlığına sahip kaynakları gösterin. Geliştirici Araçları, otomatik tamamlamayı karşılaştığı tüm çerez adlarıyla doldurur.
• set-cookie-value. Set-Cookie başlığına sahip ve belirtilen değerle eşleşen bir değere sahip kaynakları gösterin. Geliştirici Araçları, 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österir. 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 özelliğine sahip kaynakları gösterin.

İstekleri türe göre filtreleyin

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

Bu düğmeleri göremiyorsanız Filtreler işlem çubuğu gizlenmiş olabilir. Filtreler çubuğunu gizleme bölümüne bakın.

Birden fazla türdeki kaynakları 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 zaman aralığında 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, 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, gösterilen isteklerin toplam 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.

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

Alt kısımdaki durum çubuğunda, gösterilen isteklerin toplam istek sayısına oranı gösterilir.

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.

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

Bir yanıt çerezinin neden engellendiğini öğrenmek için isteği seçin, Çerezler sekmesini açın ve bilgi 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ç ipucunu 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'i seçin > check_box Engellenen istekler'i işaretleyin. Bunu test etmek için çekmecedeki Ağ isteğini engelleme sekmesini kullanabilirsiniz.

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

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

Sayfa kaynağından farklı 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.

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

İstekleri sıralama

Varsayılan olarak, İstekler tablosundaki istekler 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, Şelale'nin üzerine gelin 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ı. İlk tamamlanan 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çıklamalar, ilgili seçeneklerin en kısadan en uzuna doğru sıralandığını varsayar. Şelale sütununun başlığını tıkladığınızda sıralama tersine döner.

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. Koyu renkli kısım, baytların indirilmesi için harcanan süredir.

İstekleri analiz etme

Geliştirici Araçları açık olduğu sürece tüm istekleri Ağ paneline kaydeder. İ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 isteklerin üzerine geldiğinizde 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 (ör. 200 veya 404)
  • Merkezler arası kaynak paylaşımı (CORS) nedeniyle başarısız olan istekler için CORS error.
  • (blocked:origin), hatalı yapılandırılmış başlıklara sahip istekler için. Neyin yanlış gittiğiyle ilgili bir ipucu içeren ipucu kutusunu görmek için imleçle bu durum değerinin üzerine gelin.
  • (failed) ve ardından hata mesajı.

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

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

  • Ayrıştırıcı. Chrome'un HTML ayrıştırıcısı.
  • Yönlendirme. HTTP yönlendirmesi.
  • Konuşma metni. JavaScript işlevi. Bu durumda Ağ paneli, kaynak dosyadaki ilgili satıra bir bağlantı sağlar.
  • Erken İpuçları. HTTP 103 Early Hints yanıtı.
  • Diğer. Bir bağlantıyı kullanarak sayfaya gitme veya adres çubuğuna URL girme gibi başka bir işlem.

• Boyut. Sunucu tarafından sağlanan yanıt başlıkları ile 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örüntülenen seçeneklerin yanında onay işaretleri bulunur.

Aşağıdaki ek sütunları ekleyebilir veya kaldırabilirsiniz:

• İstek No. İstek başlatmanın mutlak sırası, varsayılan olarak İstekler tablosundaki ilk konuma sabitlenir.
• Yol. URL'nin yol kısmı.
• URL. İsteğin tam URL'si.
• Yöntem. İsteğin HTTP yöntemi (örneğin, GET, POST, PUT, DELETE).
• Protocol (Protokol). İsteğin protokolü (ör. HTTP/2 için h2, HTTP/3 için h3 vb.).
• Şema. URL'nin şema kısmı.
• Alan. URL'nin alan adı kısmı.
• Uzak adres. İsteğin uzak IP adresi ve bağlantı noktası.
• Uzak adres alanı. İsteğin uzak adres alanı. Genel IP'ler için Public, özel IP'ler için Private.
• Başlatıcı adres alanı. İsteğin başlatıcı adres alanı. Uzaktan kumanda ile aynıdır.
• Çerezler. İstekteki çerez sayısı.
• Çerezleri ayarlayın. Yanıttaki çerez sayısı.
• Öncelik. İsteğin önceliği.
• Bağlantı kimliği. İstemci oturumundaki isteğin bağlantı kimliği (varsa).
• Geçersiz kılmalar içeriyor. İsteğin geçersiz kılma işlemleri olup olmadığı (evet, hayır, içerik veya başlıklar).
• Reklamla İlgili. Doğru veya yanlış.
• Önceden yüklenmiş. İsteğin, tahmine dayalı önceden yükleme kullanılarak başlatılıp başlatılmadığı.
• Oluşturma engelleme. İsteğin oluşturma engelleme, potansiyel olarak engelleme veya engelleme olup olmadığı.
• Şelale. Her isteğin etkinliğinin görsel dökümü.

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

Satır içi çerçevelere göre gruplandırılmış istekler

Bir sayfadaki satır içi çerçeveler çok sayıda istek başlatıyorsa bunları 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.

Satır içi çerçeve tarafından başlatılan bir 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 zamanlamasını birbirleriyle 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. Bu nedenle, daha soldaki istekler, daha sağdaki isteklerden daha önce başlatılmıştır.

Şelale'yi sıralayabileceğiniz farklı yöntemleri 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 açı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:

• Veriler. Mesaj yükü. İleti düz metinse burada gösterilir. İkili işlem kodları için bu sütunda işlem kodunun adı ve kodu gösterilir. Şu işlem kodları desteklenir: Devam karesi, ikili kare, bağlantı kapatma karesi, ping karesi ve pong karesi.
• 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 renktedir.
• Gelen kısa mesajlar beyaz renkte gösterilir.
• WebSocket işlem kodları açık sarı renktedir.
• Hatalar açık kırmızı renkle gösterilir.

Bir akıştaki etkinlikleri analiz etme

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

1. Etkinliklerin yayınlandığı bir sayfada ağ isteklerini kaydedin.
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 etkinlikler 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 tablosundaki Ad sütununda bir istek seçin.
2. Önizleme sekmesini açın.

Bu sekme en çok 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 tablosundaki Ad sütununda bir istek seçin.
2. Yanıt sekmesini açın.

İkili veya sıkıştırılmış yanıtlar için Yanıt sekmesinin alt kısmındaki açılır menüden bir kod çözme yöntemi (Base64, Hex veya UTF-8) seçin.

HTTP başlıklarını görüntüleme

Bir isteğin HTTP üstbilgisi verilerini görüntülemek için:

1. İstekler tablosundaki Ad sütununda bir istek seçin.
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.

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

HTTP başlığı kaynağını görüntüleme

Başlıklar sekmesinde varsayılan olarak başlık adları alfabetik sırayla gösterilir. HTTP üstbilgi 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.

Hazır başlıklar 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, istek başlıklarının tamamı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 ç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çip 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.

URL olarak kodlanmış sorgu ve form parametrelerini görüntüleme

Geliştirici Araçları, varsayılan olarak sorgu dizesi parametrelerini ve form verilerini URL kodu çözülmüş biçimde gösterir. Yük sekmesindeki bağımsız değişkenler için URL kodlamayı etkinleştirmek veya devre dışı bırakmak üzere URL kodlu olarak görüntüle'yi veya Kodu çözülmüş olarak görüntüle'yi tıklayın.

İkili ve sıkıştırılmış yükleri görüntüleme

İkili veya sıkıştırılmış istek yükleri için Yük sekmesinin alt kısmındaki açılır menüden bir kod çözme yöntemi (Base64, Hex veya UTF-8) seçin.

Çerezleri görüntüleme

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

1. İstekler tablosundaki Ad sütununda bir istek seçin.
2. Çerezler sekmesini açı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.

Cihaza bağlı oturumları görüntüleme

Cihaza bağlı oturumlar sekmesinde, bir sitedeki tüm etkin cihaza bağlı oturumlar için seçilen istekle ilişkili erteleme (yenileme) bilgileri gösterilir.

Erteleme (yenileme) bilgilerini görüntülemek için:

1. İstekler tablosundaki Ad sütununda bir istek seçin.
2. Cihaza bağlı oturumlar sekmesini açın.

Cihaza bağlı oturumlar sekmesi yalnızca çerez içeren alakalı istekler için gösterilir. Sekmede, cihaza bağlı tüm etkin oturumlar ve oturumların isteği erteleyip ertelemediği (ertelememesi durumunda ise nedeni) listelenir. Olası erteleme seçenekleri şunlardır:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

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 tablosundaki Ad sütununda bir istek seçin.
2. Zamanlama sekmesini açı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 aşamaların her biri hakkında daha fazla bilgi için Zamanlama dökümü aşamalarının açıklaması 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 fareyle İ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ının açıklaması

Zamanlama sekmesinde görebileceğiniz aşamaların her biri hakkında daha fazla bilgi aşağıda verilmiştir:

• Sıraya alma. Tarayıcı, bağlantı başlamadan önce ve aşağıdaki 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ırdır. (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. İstek, bağlantı başlatıldıktan sonra Sıraya alma bölümünde açıklanan nedenlerden herhangi biriyle duraklatılabilir.
• DNS Araması. Tarayıcı, isteğin IP adresini çözümlüyor.
• İlk bağlantı. Tarayıcı, TCP el sıkışması veya yeniden denemeler ve SSL görüşmesi dahil olmak üzere bir bağlantı kuruyor.
• Proxy pazarlığı. Tarayıcı, isteği bir proxy sunucu ile 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.
• Bekleme (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ır. Bu değer, yanıt gövdesini okumak için harcanan toplam süredir. Beklenenden daha büyük değerler, ağın yavaş olduğunu veya tarayıcının yanıtın okunmasını geciktiren başka işlemler yapmakla meşgul olduğunu 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ı renkle 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

Geliştirici Araçları, DOMContentLoaded ve load etkinliklerinin zamanlamasını Ağ panelinde birden fazla yerde 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.

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

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

Tarayıcı tarafından sıkıştırması açıldı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, kaynağın istenmesine neden olduğunda isteğe yol açan yığın izlemeyi 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ı seçin ve ardından Boyut sütununun en altındaki değere 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ış boyutu ise 136 KB.

İ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), çeşitli HTTP oturumu araçlarının yakalanan verileri dışa aktarmak için 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 veriler ile de dışa aktarabilirsiniz.

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

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

  

• Ağ panelinin üst kısmındaki işlem çubuğunda indir HAR dosyasını 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şturulmasına izin ver'i etkinleştirin, ardından indir 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 dosyayı 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 dosyasını içe aktar'ı tıklayın.

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, fareyle Kopyala'nın üzerine gelin ve aşağıdaki seçeneklerden birini belirleyin.

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

• URL'yi kopyala. İsteğin URL'sini panoya kopyalayın.
• cURL olarak kopyala. İsteği cURL komutu olarak kopyalayın.
• PowerShell olarak kopyala'yı seçin. İsteği PowerShell komutu olarak kopyalayın.
• Getirme olarak kopyala. İsteği getirme çağrısı olarak kopyalayın.
• Fetch olarak kopyala (Node.js). İsteği Node.js getirme çağrısı olarak kopyalayın.
• Önceden yükleme öğesi olarak kopyala. İsteği <link rel="preload"> HTML etiketi olarak kopyalayın.
• Yanıtı kopyalayın. Yanıt gövdesini panoya kopyalayın.
• Yığın izlemeyi kopyalayın. İsteğin yığın izini 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. Tüm istekleri bir cURL komutları zinciri olarak kopyalar.
• Tümünü PowerShell olarak kopyala'yı seçin. Tüm istekleri bir PowerShell komutları zinciri olarak kopyalayın.
• Tümünü getirme olarak kopyala. Tüm istekleri getirme çağrıları zinciri olarak kopyalayın.
• Tümünü fetch (Node.js) olarak kopyala. Tüm istekleri bir Node.js getirme çağrıları zinciri olarak kopyalayın.
• Tümünü HAR (temizlenmiş) olarak kopyala Tüm istekleri, Cookie, Set-Cookie ve Authorization üstbilgileri gibi hassas veriler olmadan HAR verileri olarak kopyalayın.
• Tümünü HAR olarak kopyala (hassas verilerle). 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 aşağıdakilerden birini seçin:

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

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şletebilir veya daraltabilirsiniz.

Filtreler işlem çubuğunu gizleme

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

Büyük istek satırlarını kullanma

Ağ istekleri tablonuzda daha fazla beyaz alan istediğinizde büyük satırları kullanın. Bazı sütunlar, büyük satırlar kullanıldığında biraz daha fazla bilgi de sağlar. Örneğin, Boyut sütununun alt değeri, bir isteğin sıkıştırılmamış boyutudur ve Öncelik sütununda 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.

Özet parçasını gizleme

DevTools, varsayılan olarak Genel Bakış parçasını gösterir. Ayarlar'ı açın ve Genel bakışı göster onay kutusunun işaretini kaldırarak gizleyin.