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ğ panelinde İ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öreceğini 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.
- Ağ Koşulları çekmecesini açmak için
simgesini tıklayın.
- Ö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:
- Throttling menüsünü açın ve Özel > Ekle....
- Ayarlar Ayarlar > bölümünde açıklandığı şekilde yeni bir kısıtlama profili oluşturun Hızlandırma.
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:
- Örneğin, bir test aracı kullanarak yeni bir bağlantı başlatın.
- Ağ panelinde Kısıtlama yok'u seçin ve bağlantı üzerinden bir mesaj gönderin.
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.- Ağ panelinde profili seçin ve başka bir mesaj gönderin.
- 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.
- Ağ Koşulları çekmecesini açmak için
simgesini tıklayın.
- 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:
- Ağ Koşulları çekmecesini açmak için
simgesini tıklayın.
- Otomatik olarak seç'in işaretini kaldırın.
- Menüden bir kullanıcı aracısı seçeneği belirleyin veya kutuya özel bir seçenek girin.
Arama istekleri
İstek başlıkları, yük ve yanıtlarda arama yapmak için:
Sağ taraftaki 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 Ctrl + F.
Ara sekmesine sorgunuzu girin ve Enter tuşuna basın. İsteğe bağlı olarak, büyük/küçük harfe duyarlılık özelliğini veya normal ifadeleri sırasıyla etkinleştirmek için match_case ya da regular_expression (normal ifade) seçeneğini tıklayın.
Arama sonuçlarından birini tıklayın. Ağ paneli; isteği ve Başlıklar, Paload veya Yanıt sekmelerinde eşleşen dizeyi sarı renkte vurgular.
Arama sonuçlarını yenilemek için yenile Yenile'yi tıklayın. Sonuçları temizlemek için engelle Temizle'yi tıklayın.
Geliştirici Araçları'nda arama yapabileceğiniz tüm yöntemler hakkında daha fazla bilgi için Arama: Yüklü tüm kaynaklarda metin bulma bölümüne bakın.
İ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çinis:running
kullanın.larger-than
Belirtilen boyuttan daha büyük olan kaynakları bayt cinsinden gösterir. Değer ayarlama1000
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 sahipSet-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 birSet-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 sahipSet-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şenurl
öğ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
veya404
). - 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ı.
- HTTP durum kodu (örneğin,
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:
- İ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.
- İ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:
- İstekler tablosunun Ad sütununda WebSocket bağlantısının URL'sini tıklayın.
- 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:
- Etkinlik akışı sağlayan bir sayfada ağ isteklerini kaydedin. Örneğin, bu demo sayfasını açıp üç düğmeden birini tıklayın.
- 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:
- İstekler tablosunun Ad sütunu altından isteğin URL'sini tıklayın.
- Ö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:
- İstekler tablosunun Ad sütununun altından isteğin URL'sini tıklayın.
- 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:
- İstekler tablosunda bir isteği tıklayın.
- 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:
- İlgilendiğiniz isteğin Başlıklar sekmesini açın. HTTP üstbilgilerini görüntüleme başlıklı makaleye bakın.
- İ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österebilir.
İ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:
- İstekler tablosunun Ad sütununun altından isteğin URL'sini tıklayın.
- 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:
- İstekler tablosunun Ad sütunu altından isteğin URL'sini tıklayın.
- 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.