Bu codelab'de, biraz karmaşık bir örnek uygulama için tüm ağ trafiğini yorumlama süreci adım adım açıklanmaktadır. Alıştırmanın sonunda, kendi web uygulamanızın ne yüklediğini ve her isteği ne zaman yaptığını anlamak 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.
- Geliştirici Araçları'nı açmak için `Ctrl+Üst Karakter+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ğ panelinde, ilk gezinmeniz nedeniyle yüklenen tüm öğeler gösterilir:
Girişleri yorumlama
Kaydedilen 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 (ana dokümanın alt kaynakları olarak bilinir) için sonraki isteklerin her biri bu orijinal kaynaktan gelir.
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 yapıldığına bakıldığında, şelale diyagramı bu isteklerin gezinme isteğine yanıt verme sürecinin çok geç aşamalarına kadar başlatılmadığını gösterir.
HTML belgesi, CSS ve JavaScript istekleri, 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 yaparken birçok web uygulamasında yaygın olarak görülen 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 izin verir:
Web uygulamasının çalışacağı bir konum belirlendikten sonra Yakındaki Wikipedia Girişlerini Bul'u tıklamak, birkaç ek ağ isteğiyle sonuçlanır. Şuna 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, 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ünde görmek biraz zor olsa da Şelale sütunundaki girişleri doğrudan API yanıtından geliyor.
Tüm bu ek istekler için zaman, Yakındaki Wikipedia Girişlerini Bul'u tıklamadan önce sayfayı ne kadar süre açık tuttuğunuza bağlı olarak değişir. Burada en önemli nokta, zaman bilgisinin ilk gezinme isteğinden ayrılmış olmasıdır. Bunu, şelale görünümündeki büyük boşluktan anlayabilirsiniz. Bu boşluk, ilk yükleme ile Wikipedia API isteğinin yapıldığı zaman arasında geçen süreyi temsil eder.
Bir gezinme işleminden sonra belirli bir süre geçtikten sonra yapılan istekler, sayfaya ilk gittiğinizde sayfayı görüntülemek için kullanılan ilk istek grubunun aksine "çalışma zamanı istekleri" kategorisine girer.
Özetleme
Bu codelab'deki adımları uygulayarak herhangi bir web uygulamasının neleri yüklediğini analiz etmek için kullanabileceğiniz araçları öğrendiniz.
Ağ paneli, Ad sütunundaki URL'ler ve Tür sütunundaki veriler aracılığıyla neyin yüklendiği ve şelale ekranı aracılığıyla ne zaman yüklendiği sorularını yanıtlamanıza yardımcı olur.
Bir web sayfasının yaptığı isteklerin (genellikle) iki kategoriden birinde 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ı istekleri. Bu genellikle bir API'ye istek gönderilmesiyle başlar ve ardından, alınan API verilerine göre birkaç takip isteğiyle devam eder.