Bu codelab'de, ağınızın tamamını yorumlama sürecinde size yol gösterilir örnek uygulamaya yönelik trafik alıyor. Alıştırmanın sonunda, kendi web uygulamanızın ne olduğunu anlamak için gereken becerilere sahip olacaksınız yüklendiğini ve her istekte ne zaman yapıldığını gösterir.
Ağ Paneli'ne gitme
Demonun ağ trafiğini görmek için Ağ paneline gidin bir uygulamadır.
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran
.Geliştirici Araçları'nı açmak için "Control+Ü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ğ paneli, ilk ziyaretiniz nedeniyle yüklenen tüm öğeleri, gezinme:
Girişleri yorumlama
Kaydedilen ağ trafiğinin her satırı tek bir isteği ve yanıtı temsil eder eşlemeye devam edin.
document türündeki ilk satır,
web uygulamasının HTML'sini oluşturun. Bu, şelalenin kaynağıdır. sonraki her bir
ek öğe istekleri (ana belgenin alt kaynakları olarak bilinir) akışı
bu orijinal kaynaktan
CSS stylesheet ve script alt kaynağını gösteren ikinci ve üçüncü satırlar
ana belge tarafından başlatılan bağımlı isteklerdir.
Şelale diyagramında bu isteklerin ne zaman yapıldığına bakılırsa verilen yanıtlara yanıt sürecinin çok sonlarına kadar başlamamış navigasyon isteği.
Birlikte ele alındığında, HTML belgesi, CSS ve sırasında sayfanın tamamını görüntüleyebilmek için ilk gezinme.
Birkaç ek çalışma zamanı isteği oluşturun
Ağ paneli hâlâ açık ve kayıttayken bir şeyler simüle edebilir birçok web uygulamasında ortak: web sitelerine daha fazla veri eklemek için kullanılan gezinme tamamlandıktan sonra sayfaya iletir.
Uygulamada Beni Bul'u, ardından bu ek istekleri tetikleyerek Görünen pop-up'ta İzin ver'i seçin. Bu, sitenin mevcut konumunuza erişmesine izin verir:
Web uygulaması kullanılacak bir konum belirledikten sonra Yakında Bul'u tıklayın Wikipedia Girişleri ek ağ isteklerine neden olur. Siz şuna benzer bir sayfayla karşılaşırsınız:
Yeni girişleri yorumlayın
Daha önce olduğu gibi, kaydedilen ağ trafiğinin her satırı tek bir isteği temsil eder bulunur.
Yeni girişlerin ilk satırı fetch türünde bir isteği temsil eder.
Bu da
web uygulamasının veri isteme yöntemi
Vikipedi API'sından.
Aşağıdaki satırların tümüpngjpeg
Wikipedia girişleri. Ekran görüntüsünden görmek biraz zor olsa da,
Şelale sütunundaki girişler doğrudan API yanıtından gelir.
Tüm bu ek isteklerin ne zaman olacağına bağlı olarak Yakındaki Wikipedia'da Bul'u tıklamadan önce sayfayı açık tuttuğunuz süre Girişler. Buradaki en önemli nokta şudur: zaman ilk gezinme isteği. Bunu, ortalarındaki büyük boşluktan zaman aralığını temsil eden Şelale görüntüsü ilk yüklemede ve Wikipedia API isteği gönderildiğinde geçerlidir.
Gezinmeden sonra belirli bir süre geçtikten sonra yapılan istekler bu kategoriye girer. sayısı kadar 2008'de gösterilen istek, ilk ziyaretinizde sayfayı.
Özet
Bu codelab'deki adımları izleyerek herhangi bir web uygulamasının ne yüklendiğini analiz etmek için kullanabileceğiniz araçlar.
Ağ paneli, aşağıdaki adımları uygulayarak nenin yüklendiğini Ad sütunundaki URL'ler ve Tür sütunundaki veriler ile birlikte ne zaman yükleniyor.
Ayrıca, bir web sayfası tarafından gönderilen isteklerin (genellikle) bir sitenin şu iki kategoriden birini tercih edebilirsiniz:
- Yeni bir sayfaya gittikten hemen sonra yapılan HTML, JavaScript, CSS (ve potansiyel olarak diğer öğeler).
- Kullanıcının sayfayla etkileşimi sonucunda yapılan çalışma zamanı istekleri. Bu genellikle bir API'ye yapılan bir istekle başlayıp ardından farklı alanlara alınan API verilerine dayalı takip istekleri.