Bu codelab'de, biraz karmaşık bir örnek uygulama için tüm ağ trafiğini yorumlama sürecinde size yol gösterilmektedir. Alıştırmanın sonunda, kendi web uygulamanızın neleri yüklediğini ve her isteği ne zaman gönderdiğini öğrenmek için gereken becerilere sahip olacaksınız.
Ağ paneline gidin
Demo uygulamasının ağ trafiğini görmek için Ağ paneline gidin.
Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a
basın.Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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şler nasıl yorumlanır?
Kaydedilen ağ trafiği satırlarının her biri tek bir istek ve yanıt çiftini temsil eder.
document türüne sahip ilk satır, web uygulamasının HTML'si için ilk gezinme isteğidir. Bu, şelalenin kaynağıdır; ek öğelerle ilgili sonraki isteklerin her biri (ana dokümanın alt kaynakları olarak bilinir) bu orijinal kaynaktan gelir.
Bir CSS stylesheet ve 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 gönderildiğine bakıldığında şelale şemasında, gezinme isteğine yanıt verme sürecinin çok sonuna kadar başlatılmadıkları görülüyor.
İlk gezinme sırasında sayfanın tamamının gösterilmesi için HTML dokümanı, CSS ve JavaScript isteklerinin birlikte kullanılması gerekir.
Ek çalışma zamanı istekleri oluşturun
Ağ paneli hâlâ açık ve kayıttayken birçok web uygulamasında yaygın olan bir durumu simüle etme zamanı: ilk gezinme tamamlandıktan sonra sayfaya daha fazla veri eklemek için kullanılan ek API istekleri.
Uygulamada Bul beni'yi, 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ının çalışacağı bir konumu olduğunda Yakındaki Wikipedia Girişlerini Bul'u tıklamak birkaç ek ağ isteği gönderir. Aşağıdakine benzer bir şey görürsünüz:
Yeni girişleri yorumlama
Daha önce olduğu gibi, kaydedilen ağ trafiği satırlarının her biri tek bir istek ve yanıt çiftini temsil eder.
Yeni girişlerin ilk satırı, fetch türüne sahip bir isteği temsil eder. Bu tür, 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ülse de şelale sütunundaki girişler doğrudan API yanıtından gelir.
Tüm bu ek isteklerde zaman, Yakındaki Wikipedia Girişlerini Bul'u tıklamadan önce sayfayı ne kadar süredir açık tuttuğunuza göre değişir. Burada en önemli nokta, when işlevinin ilk navigasyon isteğinden ayrılmasıdır. Bunu, şelale görüntüsünde bulunan ve ilk yükleme ile Wikipedia API isteğinin gönderilmesi arasında geçen süreyi temsil eden büyük boşluktan anlayabilirsiniz.
Bir gezinme işleminden sonra bir süre geçtikten sonra yapılan istekler, sayfaya ilk kez gittiğinizde sayfayı görüntülemek için kullanılan ilk istek grubuna kıyasla "çalışma zamanı istekleri" kategorisine girer.
Özet
Bu codelab'deki adımları uygulayarak herhangi bir web uygulamasının neleri yüklediğini analiz etmek için kullanabileceğiniz araçlar hakkında bilgi sahibi oldunuz.
Ağ paneli, Ad sütunundaki URL'ler ve Tür sütunundaki veriler aracılığıyla nelerin yüklendiği sorusuna yanıt bulmanıza ve şelale görüntüleme aracılığıyla ne zaman yüklendiği sorusuna yanıt bulmanıza yardımcı olur.
Ayrıca, bir web sayfası tarafından yapılan isteklerin (genellikle) iki kategoriden birine gruplandırılabileceğini de gördünüz:
- Yeni bir sayfaya gittikten hemen sonra HTML, JavaScript, CSS (ve muhtemelen diğer öğeler) için yapılan ilk istekler.
- Kullanıcının sayfayla etkileşimi sonucunda yapılan çalışma zamanında istekler. Bu işlem genellikle bir API isteğiyle başlar ve daha sonra alınan API verilerine göre birkaç takip isteği gönderilir.