Codelab ini memandu Anda dalam proses menafsirkan semua traffic jaringan untuk aplikasi contoh yang agak kompleks. Di akhir latihan ini, Anda akan memiliki keterampilan yang diperlukan untuk mengetahui apa yang dimuat oleh aplikasi web Anda sendiri dan kapan membuat setiap permintaan.
Membuka Panel Jaringan
Buka panel Jaringan untuk melihat traffic jaringan untuk aplikasi demo.
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 Network
Muat ulang halaman untuk melihat traffic jaringan.
Panel Network 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 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 dimuat, adalah permintaan dependen yang dimulai oleh dokumen utama.
Melihat kapan permintaan tersebut dibuat, diagram waterfall menunjukkan bahwa permintaan tersebut tidak dimulai hingga sangat terlambat dalam proses merespons permintaan navigasi.
Secara keseluruhan, permintaan untuk dokumen HTML, CSS, dan JavaScript diperlukan untuk menampilkan halaman lengkap selama navigasi awal.
Membuat beberapa permintaan runtime tambahan
Dengan panel Network yang masih terbuka dan merekam, kini saatnya menyimulasikan sesuatu yang umum bagi 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 pop-up yang muncul. Tindakan ini akan memungkinkan 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 yang 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.
Semua baris berikut adalah gambar (png atau jpeg) yang terkait dengan entri Wikipedia. Meskipun agak sulit untuk dilihat dari screenshot, entrinya di kolom Waterfall langsung mengalir dari respons API.
Untuk semua permintaan tambahan ini, waktu 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 celah besar yang ada di tampilan Waterfall, yang menunjukkan periode waktu yang berlalu di antara pemuatan awal dan saat permintaan Wikipedia API dibuat.
Permintaan yang dibuat setelah jeda waktu setelah navigasi termasuk dalam kategori "permintaan runtime", dibandingkan dengan kumpulan permintaan awal yang digunakan untuk menampilkan halaman saat Anda pertama kali membuka halaman tersebut.
Mengambil kesimpulan
Setelah menyelesaikan langkah-langkah dalam codelab ini, Anda kini memahami alat yang dapat digunakan untuk menganalisis aplikasi web apa pun yang dimuat.
Panel Network membantu Anda menjawab pertanyaan tentang apa yang dimuat, melalui URL di kolom Nama dan data di kolom Jenis, beserta kapan 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. Ini sering kali dapat dimulai dengan permintaan ke API, lalu mengalir ke beberapa permintaan tindak lanjut berdasarkan data API yang diambil.