Codelab ini memandu Anda dalam proses menafsirkan semua jaringan traffic untuk aplikasi contoh yang agak kompleks. Pada akhir latihan, Anda akan memiliki keterampilan yang dibutuhkan untuk mencari tahu apa aplikasi web Anda memuat dan kapan membuat setiap permintaan.
Buka Panel Jaringan
Buka panel Jaringan guna melihat traffic jaringan untuk demo aplikasi.
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh
.Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Jaringan.
Muat ulang halaman untuk melihat traffic jaringan.
Panel Network menampilkan semua aset yang dimuat karena navigasi:
Cara menafsirkan entri
Setiap baris dari traffic jaringan yang dicatat mewakili satu permintaan dan respons berpasangan.
Baris pertama, dengan jenis document, adalah permintaan navigasi awal untuk
HTML aplikasi web Anda. Ini adalah sumber air terjun; setiap perintah
alur permintaan untuk aset tambahan (dikenal sebagai subresource dokumen utama)
dari sumber asli ini.
Baris kedua dan ketiga, menunjukkan stylesheet CSS dan subresource script
yang dimuat, adalah permintaan dependen yang
dimulai oleh dokumen utama.
Diagram waterfall menunjukkan bahwa kapan permintaan tersebut dibuat mereka belum dimulai sampai terlambat dalam proses menanggapi permintaan navigasi.
Secara keseluruhan, permintaan untuk dokumen HTML, CSS, dan JavaScript diperlukan untuk menampilkan laman penuh selama navigasi awal.
Membuat beberapa permintaan runtime tambahan
Saat panel Network masih terbuka dan merekam, saatnya untuk menyimulasikan sesuatu umum untuk banyak aplikasi web: permintaan API tambahan digunakan untuk menambahkan lebih banyak data ke halaman setelah navigasi awal selesai.
Picu permintaan tambahan ini dengan mengklik Find Me di aplikasi, lalu Izinkan di pop-up yang muncul. Ini akan memungkinkan situs mengakses lokasi Anda saat ini:
Setelah aplikasi web memiliki lokasi untuk digunakan, klik Find Nearby Entri Wikipedia menghasilkan beberapa permintaan jaringan tambahan. Anda akan melihat sesuatu seperti ini:
Menafsirkan entri baru
Seperti sebelumnya, setiap baris traffic jaringan yang dicatat mewakili satu permintaan dan pasangan respons.
Baris pertama entri baru mewakili permintaan dengan jenis fetch,
yang sesuai dengan
cara aplikasi web meminta data
dari Wikipedia API.
Semua baris berikut adalah gambar (png atau jpeg) yang terkait dengan
Entri Wikipedia. Meskipun agak sulit dilihat dari screenshot,
entri di kolom Waterfall secara langsung mengalir dari respons API.
Untuk semua permintaan tambahan ini, kapan akan bervariasi berdasarkan lama Anda telah membuka halaman sebelum mengklik Find Nearby Wikipedia Entri. Yang paling penting di sini adalah kapan terputus dari permintaan navigasi awal. Anda dapat membedakannya dari kesenjangan besar yang ada di tampilan Waterfall, yang mewakili periode waktu yang berlalu di antara pemuatan awal dan kapan permintaan Wikipedia API dibuat.
Permintaan yang dibuat setelah jeda waktu setelah navigasi termasuk dalam kategori "permintaan runtime", sebagai kebalikan dari serangkaian permintaan awal yang digunakan untuk laman ketika Anda pertama kali menavigasi ke laman tersebut.
Mengambil kesimpulan
Setelah melakukan langkah-langkah dalam codelab ini, Anda sekarang telah memahami alat yang dapat Anda gunakan untuk menganalisis apa pun yang dimuat oleh aplikasi web.
Panel Network membantu Anda menjawab pertanyaan tentang apa yang dimuat, melalui URL di kolom Name dan data di kolom Type, beserta when yang dimuat, melalui tampilan waterfall.
Anda juga melihat bahwa permintaan yang dibuat oleh laman web (biasanya) dapat dikelompokkan ke dalam salah satu dari dua kategori:
- Permintaan awal, dibuat tepat setelah membuka halaman baru, untuk HTML, JavaScript, CSS (dan kemungkinan aset lainnya).
- Permintaan runtime yang dibuat sebagai hasil interaksi pengguna dengan halaman. Ini sering kali dapat dimulai dengan permintaan ke API, lalu mengalir ke beberapa permintaan tindak lanjut berdasarkan data API yang diambil.