Bu codelab'de, biraz karmaşık bir örnek uygulamanın tüm ağ trafiğini yorumlama süreci adım adım açıklanmaktadır. Bu alıştırmanın sonunda, kendi web uygulamanızın ne yüklediğini ve her isteği ne zaman yaptığını belirlemek için gereken becerilere sahip olacaksınız.
Ağ paneline gitme
Demo uygulamasının ağ trafiğini görmek için Ağ paneline gidin.
- Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
- Ağ sekmesini tıklayın.
- Ağ trafiğini görmek için sayfayı yeniden yükleyin.
Ağ paneli, ilk gezinmeniz nedeniyle yüklenen tüm öğeleri gösterir:
Girişleri yorumlama
Kayıtlı ağ trafiğinin her satırı, tek bir istek ve yanıt çiftini temsil eder.
document türündeki ilk satır, web uygulamasının HTML'si için ilk gezinme isteğidir. Bu, şelalenin kaynağıdır. Ek öğeler için yapılan sonraki isteklerin her biri (ana belgenin alt kaynakları olarak bilinir) bu orijinal kaynaktan gelir.
Bir CSS stylesheet ve bir script alt kaynağının yüklendiğini gösteren ikinci ve üçüncü satırlar, ana doküman tarafından başlatılan bağımlı isteklerdir.
Bu isteklerin ne zaman yapıldığına baktığımızda, şelale diyagramı, gezinme isteğine yanıt verme sürecinde çok geç olana kadar başlatılmadıklarını gösteriyor.
HTML belgesi, CSS ve JavaScript istekleri birlikte alındığında ilk gezinme sırasında tam sayfanın gösterilmesi için gereklidir.
Ek çalışma zamanı istekleri oluşturma
Ağ paneli açık ve kayıt yapmaya devam ederken birçok web uygulamasında yaygın olan bir durumu simüle etme zamanı geldi: İlk gezinme tamamlandıktan sonra sayfaya daha fazla veri eklemek için kullanılan ek API istekleri.
Uygulamada Beni Bul'u ve ardından açılan pop-up'ta İzin Ver'i tıklayarak bu ek istekleri tetikleyin. Bu işlem, sitenin mevcut konumunuza erişmesine olanak tanır:
Web uygulaması çalışmak için bir konuma sahip olduğunda Yakındaki Wikipedia Girişlerini Bul'u tıkladığınızda birkaç ek ağ isteği gönderilir. Aşağıdakine benzer bir şey görürsünüz:
Yeni girişleri yorumlama
Daha önce olduğu gibi, kaydedilen ağ trafiğinin her satırı tek bir istek ve yanıt çiftini temsil eder.
Yeni girişlerin ilk satırı, fetch türünde bir isteği temsil eder. Bu istek, web uygulamasının Wikipedia API'den veri isteme şekline karşılık gelir.
Aşağıdaki satırların tümü, Wikipedia girişleriyle ilişkili resimlerdir (png veya jpeg). Ekran görüntüsünden biraz zor görünse de Şelale sütunundaki girişleri doğrudan API yanıtından geliyor.
Bu ek isteklerin tümünde ne zaman sorusunun cevabı, Yakındaki Wikipedia Girişlerini Bul'u tıklamadan önce sayfanın ne kadar süre açık kaldığına bağlı olarak değişir. Burada en önemli nokta, ne zaman bilgisinin ilk gezinme isteğiyle bağlantısının kesilmesidir. Bunu, ilk yükleme ile Wikipedia API isteğinin yapılması arasında geçen süreyi temsil eden, şelale ekranındaki büyük boşluktan anlayabilirsiniz.
Gezinmeden sonraki bir süre içinde yapılan istekler, sayfaya ilk kez gittiğinizde sayfayı görüntülemek için kullanılan ilk istek grubunun aksine "çalışma zamanı istekleri" kategorisine girer.
Özet
Bu codelab'deki adımları tamamladığınıza göre artık herhangi bir web uygulamasının yüklediği öğeleri analiz etmek için kullanabileceğiniz araçları biliyorsunuz.
Ağ paneli, ne yüklendiği sorusunu yanıtlamanıza yardımcı olur. Bunu, Ad sütunundaki URL'ler ve Tür sütunundaki verilerle birlikte, ne zaman yüklendiği sorusunu yanıtlamak için de şelale görünümüyle yapar.
Ayrıca, bir web sayfası tarafından yapılan isteklerin (genellikle) iki kategoriden birinde gruplandırılabildiğini de görmüşsünüzdür:
- HTML, JavaScript, CSS (ve muhtemelen diğer öğeler) için yeni bir sayfaya gidildikten hemen sonra yapılan ilk istekler.
- Kullanıcının sayfayla etkileşimi sonucunda yapılan çalışma zamanı istekleri. Bu genellikle bir API'ye yapılan istekle başlar ve ardından alınan API verilerine göre birkaç takip isteğiyle devam eder.