Codelab ini memandu Anda melalui proses menafsirkan semua traffic jaringan untuk aplikasi contoh yang agak kompleks. Di akhir latihan, Anda akan memiliki keterampilan yang diperlukan untuk mengetahui apa yang dimuat aplikasi web Anda dan kapan aplikasi tersebut membuat setiap permintaan.
Membuka panel Jaringan
Buka panel Jaringan untuk melihat traffic jaringan aplikasi demo.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Muat ulang halaman untuk melihat traffic jaringan.
Panel Jaringan menampilkan semua aset yang dimuat karena navigasi awal Anda:
Cara menafsirkan entri
Setiap baris traffic jaringan yang direkam mewakili satu pasangan permintaan dan respons.
Baris pertama, dengan jenis document, adalah permintaan navigasi awal untuk HTML aplikasi web. Ini adalah sumber untuk waterfall; setiap permintaan berikutnya untuk aset tambahan (dikenal sebagai subresource dokumen utama) mengalir dari sumber asli ini.
Baris kedua dan ketiga, yang menampilkan stylesheet CSS dan subresource script
yang sedang dimuat, adalah permintaan dependen yang dimulai oleh dokumen utama.
Dengan melihat kapan permintaan tersebut dibuat, diagram waterfall menunjukkan bahwa permintaan tersebut baru dimulai setelah proses merespons permintaan navigasi hampir selesai.
Secara keseluruhan, permintaan untuk dokumen HTML, CSS, dan JavaScript diperlukan untuk menampilkan halaman penuh selama navigasi awal.
Membuat beberapa permintaan runtime tambahan
Dengan panel Jaringan yang masih terbuka dan merekam, saatnya menyimulasikan sesuatu yang umum untuk banyak aplikasi web: permintaan API tambahan yang digunakan untuk menambahkan lebih banyak data ke halaman setelah navigasi awal selesai.
Picu permintaan tambahan ini dengan mengklik Find Me di aplikasi, lalu Allow di jendela pop-up yang muncul. Tindakan ini akan mengizinkan situs mengakses lokasi Anda saat ini:
Setelah aplikasi web memiliki lokasi untuk digunakan, mengklik Find Nearby Wikipedia Entries akan menghasilkan beberapa permintaan jaringan tambahan. Anda akan melihat tampilan seperti ini:
Menafsirkan entri baru
Seperti sebelumnya, setiap baris traffic jaringan yang direkam mewakili satu pasangan permintaan dan respons.
Baris pertama entri baru mewakili permintaan dengan jenis fetch,
yang sesuai dengan
cara aplikasi web meminta data
dari Wikipedia API.
Baris berikut semuanya adalah gambar (png atau jpeg) yang terkait dengan
entri Wikipedia. Meskipun agak sulit dilihat dari screenshot, entri mereka di kolom Waterfall langsung mengalir dari respons API.
Untuk semua permintaan tambahan ini, kapan akan bervariasi berdasarkan berapa lama Anda membuka halaman sebelum mengklik Find Nearby Wikipedia Entries. Yang paling penting di sini adalah kapan terputus dari permintaan navigasi awal. Anda dapat mengetahuinya dari jeda besar yang ada di tampilan Waterfall, yang menunjukkan jangka waktu yang berlalu antara pemuatan awal dan saat permintaan API Wikipedia dibuat.
Permintaan yang dibuat setelah jeda waktu setelah navigasi termasuk dalam kategori "permintaan runtime", bukan kumpulan permintaan awal yang digunakan untuk menampilkan halaman saat Anda pertama kali membukanya.
Mengambil kesimpulan
Setelah mengikuti langkah-langkah dalam codelab ini, Anda kini sudah memahami alat yang dapat digunakan untuk menganalisis apa yang dimuat oleh setiap aplikasi web.
Panel Jaringan membantu Anda menjawab pertanyaan tentang apa yang dimuat, melalui URL di kolom Nama dan data di kolom Jenis, serta kapan data tersebut dimuat, melalui tampilan waterfall.
Anda juga telah melihat bahwa permintaan yang dibuat oleh halaman web (biasanya) dapat dikelompokkan ke dalam salah satu dari dua kategori:
- Permintaan awal, yang dibuat tepat setelah membuka halaman baru, untuk HTML, JavaScript, CSS (dan kemungkinan aset lainnya).
- Permintaan runtime yang dibuat sebagai hasil dari interaksi pengguna dengan halaman. Hal ini sering kali dapat dimulai dengan permintaan ke API, lalu mengalir ke beberapa permintaan lanjutan berdasarkan data API yang diambil.