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 sendiri dan kapan aplikasi tersebut membuat setiap permintaan.
Buka Panel Jaringan
Buka panel Jaringan untuk melihat traffic jaringan aplikasi demo.
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian 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 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 sub-resource dokumen utama) mengalir
dari sumber asli ini.
Baris kedua dan ketiga, yang menampilkan stylesheet CSS dan sub-resource 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 penuh selama navigasi awal.
Membuat beberapa permintaan runtime tambahan
Dengan panel Jaringan yang masih terbuka dan merekam, saatnya untuk 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 Temukan Saya di aplikasi, lalu Izinkan di pop-up yang muncul. Tindakan ini akan mengizinkan situs mengakses lokasi Anda saat ini:
Setelah aplikasi web memiliki lokasi untuk digunakan, mengklik Temukan Entri Wikipedia di Sekitar akan menghasilkan beberapa permintaan jaringan tambahan. Anda akan melihat sesuatu seperti ini:
Menafsirkan entri baru
Seperti sebelumnya, setiap baris traffic jaringan yang dicatat 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 dilihat dari screenshot, entrinya
di kolom Waterfall langsung mengalir dari respons API.
Untuk semua permintaan tambahan ini, kapan akan bervariasi berdasarkan lamanya Anda membuka halaman sebelum mengklik Temukan Entri Wikipedia di Sekitar. Yang paling penting di sini adalah when terputus dari permintaan navigasi awal. Anda dapat mengetahuinya dari celah besar yang ada di tampilan Waterfall, yang mewakili jangka 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", bukan kumpulan permintaan awal yang digunakan untuk menampilkan halaman saat Anda pertama kali membukanya.
Merangkum
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, beserta kapan data 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 dilakukan tepat setelah membuka halaman baru, untuk HTML, JavaScript, CSS (dan mungkin aset lainnya).
- Permintaan runtime yang dibuat sebagai hasil dari interaksi pengguna dengan halaman. Hal ini sering kali dimulai dengan permintaan ke API, lalu mengalir ke beberapa permintaan lanjutan berdasarkan data API yang diambil.