Bu codelab'de, biraz karmaşık bir örnek uygulama için tüm ağ trafiğini yorumlama süreci açıklanmaktadır. Alıştırmanın sonunda, kendi web uygulamanızın neyi yüklediğini ve her bir isteği ne zaman yaptığını öğrenmek için ihtiyaç duyacağınız becerilere sahip olacaksınız.
Ağ Paneli'ne gidin
Demo uygulamanın ağ trafiğini görmek için Ağ paneline gidin.
Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın.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
Her kaydedilen ağ trafiği satırı, tek bir isteği 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 (ana belgenin alt kaynakları olarak bilinir) için sonraki isteklerin her biri bu orijinal kaynaktan gelir.
Bir CSS stylesheet ve bir script alt kaynağının yüklenmekte olduğunu 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 bakıldığında, şelale diyagramı gezinme isteğine yanıt verme sürecinin çok geç olana kadar başlatılmadığını gösterir.
Birlikte ele alındığında, ilk gezinme sırasında sayfanın tamamını görüntülemek için HTML dokümanı, CSS ve JavaScript istekleri gerekir.
Ek çalışma zamanı istekleri oluşturun
Ağ paneli hâlâ açık ve kayıt açıkken, pek çok web uygulamasında sık görülen bir şeyi simüle etmek gerekir: İlk gezinme tamamlandıktan sonra sayfaya daha fazla veri eklemek için kullanılan ek API istekleri.
Uygulamada Beni Bul'u, ardından açılan pop-up'ta İzin ver'i tıklayarak bu ek istekleri tetikleyin. Bu işlem, sitenin mevcut konumunuza erişmesine izin verir:
Web uygulaması üzerinde çalışabileceğiniz bir konum belirledikten sonra, Yakındaki Wikipedia Girişlerini Bul'un tıklanması çeşitli ek ağ istekleriyle sonuçlanır. Şuna benzer bir sonuç görürsünüz:
Yeni girişleri yorumlama
Daha önce olduğu gibi, kaydedilen her ağ trafiği satırı tek bir isteği ve yanıt çiftini temsil eder.
Yeni girişlerin ilk satırı fetch türündeki bir isteği temsil eder. Bu, 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 görsellerdir (png veya jpeg). Ekran görüntüsünden bunu görmek biraz zor olsa da Şelale sütunundaki girişleri doğrudan API yanıtından gelmektedir.
Tüm bu ek istekler için ne zaman değeri, Yakındaki Wikipedia Girişlerini Bul'u tıklamadan önce sayfayı ne kadar süreyle açık tuttuğunuza bağlı olarak değişiklik gösterir. Buradaki en önemli nokta, ilk gezinme isteğiyle ne zaman arasındaki bağlantının kesilmiş olmasıdır. Şelale ekranında bulunan ve ilk yükleme ile Wikipedia API isteğinin yapıldığı zaman arasında geçen süreyi temsil eden büyük boşluktan bunu anlayabilirsiniz.
Gezinmeyi takiben belirli bir süre geçtikten sonra yapılan istekler, sayfayı ilk ziyaret ettiğinizde görüntülemek için kullanılan ilk istek grubunun aksine "çalışma zamanı istekleri" kategorisine girer.
Konuyu özetleme
Bu codelab'deki adımları izledikten sonra herhangi bir web uygulamasının ne yüklediğini analiz etmek için kullanabileceğiniz araçlar hakkında bilgi sahibisiniz.
Ağ paneli, Ad sütunundaki URL'ler, Tür sütunundaki veriler ve şelale görüntüsü üzerinden ne zaman yüklendiği ile nenin yüklendiğine ilişkin soruyu yanıtlamanıza yardımcı olur.
Ayrıca, bir web sayfası tarafından yapılan isteklerin (genellikle) iki kategoriden birinde gruplandırılabildiğini gördünüz:
- HTML, JavaScript, CSS (ve potansiyel olarak 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 durum genellikle bir API'ye yapılan bir istekle başlayabilir ve ardından alınan API verilerine göre çeşitli takip isteklerine akabilir.