Memeriksa aktivitas jaringan

Kayce Basques

Ini adalah tutorial langsung dari beberapa fitur DevTools yang paling umum digunakan yang terkait dengan pemeriksaan aktivitas jaringan halaman.

Lihat Referensi Jaringan jika Anda ingin menjelajahi fitur.

Baca terus, atau tonton versi video dari tutorial ini:

Kapan harus menggunakan panel Jaringan

Secara umum, gunakan panel Jaringan jika Anda perlu memastikan bahwa resource sedang didownload atau diupload seperti yang diharapkan. Kasus penggunaan paling umum untuk panel Jaringan adalah:

• Memastikan bahwa sumber daya benar-benar sedang diupload atau diunduh.
• Memeriksa properti setiap resource, seperti header HTTP, konten, ukuran, dan sebagainya.

Jika Anda mencari cara untuk meningkatkan performa pemuatan halaman, jangan mulai dengan panel Jaringan. Ada banyak jenis masalah performa pemuatan yang tidak terkait dengan aktivitas jaringan. Mulailah dengan panel Lighthouse karena memberi Anda saran yang ditargetkan tentang cara meningkatkan kualitas halaman. Lihat Mengoptimalkan Kecepatan Situs.

Membuka panel Jaringan

Untuk mendapatkan hasil maksimal dari tutorial ini, buka demo dan cobalah fitur-fitur di halaman demo.

1. Buka Demo Mulai.

   

   Gambar 1. Demo

   Anda dapat memindahkan demo ke jendela terpisah.

   

   Gambar 2. Demo di satu jendela dan tutorial ini di jendela lain

2. Buka DevTools dengan menekan Control+Shift+J atau Command+Option+J (Mac). Panel Konsol akan terbuka.

   

   Gambar 3. Console

   Anda mungkin memilih untuk menempatkan DevTools ke bagian bawah jendela.

   

   Gambar 4. DevTools dipasang ke bagian bawah jendela

3. Klik tab Network Panel Jaringan akan terbuka.

   

   Gambar 5. DevTools dipasang ke bagian bawah jendela

Saat ini panel Jaringan kosong. Hal ini karena DevTools hanya mencatat aktivitas jaringan ke dalam log saat terbuka dan tidak ada aktivitas jaringan yang terjadi sejak Anda membuka DevTools.

Log aktivitas jaringan

Untuk melihat aktivitas jaringan yang disebabkan oleh halaman:

1. Muat ulang halaman. Panel Jaringan mencatat semua aktivitas jaringan di Log Jaringan.

   

   Gambar 6. Log Jaringan

   Setiap baris Log Jaringan mewakili resource. Secara default, resource dicantumkan secara kronologis. Sumber daya teratas biasanya merupakan dokumen HTML utama. Resource bawah adalah apa pun yang diminta terakhir.

   Setiap kolom merepresentasikan informasi tentang resource. Gambar 6 menunjukkan kolom default:

   • Status. Kode respons HTTP.
   • Jenis. Jenis resource.
   • Inisiator. Apa yang menyebabkan resource diminta. Mengklik link di kolom Inisiator akan mengarahkan Anda ke kode sumber yang menyebabkan permintaan.
   • Time. Durasi permintaan.

   • Waterfall. Representasi grafis dari berbagai tahap permintaan. Arahkan kursor ke {i>Waterfall<i} untuk melihat perinciannya.

     Catatan: Catatan Grafik di atas Log Jaringan disebut Ringkasan. Anda tidak akan menggunakannya dalam tutorial ini, jadi Anda dapat menyembunyikannya jika mau. Lihat [Menyembunyikan panel Ringkasan][6].

2. Selama Anda membuka DevTools, DevTools akan merekam aktivitas jaringan di Log Jaringan. Untuk mendemonstrasikannya, pertama-tama lihat bagian bawah Log Jaringan dan buat catatan mental tentang aktivitas terakhir.

3. Sekarang, klik tombol Dapatkan Data di demo.

4. Lihat kembali bagian bawah Log Jaringan. Ada resource baru yang disebut getstarted.json. Mengklik tombol Dapatkan Data menyebabkan halaman meminta file ini.

   

   Gambar 7. Resource baru di Log Jaringan

Tampilkan informasi selengkapnya

Kolom Log Jaringan dapat dikonfigurasi. Anda dapat menyembunyikan kolom yang tidak digunakan. Ada juga banyak kolom yang disembunyikan secara default yang mungkin berguna bagi Anda.

1. Klik kanan header tabel Log Jaringan, lalu pilih Domain. Domain setiap resource kini ditampilkan.

   

   Gambar 8. Mengaktifkan kolom Domain

Catatan: Tips Anda dapat melihat URL lengkap resource dengan mengarahkan kursor ke selnya di kolom Name.

Menyimulasikan koneksi jaringan yang lebih lambat

Koneksi jaringan komputer yang Anda gunakan untuk membuat situs mungkin lebih cepat daripada koneksi jaringan perangkat seluler pengguna. Dengan melakukan throttling halaman, Anda bisa mendapatkan gambaran yang lebih baik tentang waktu yang dibutuhkan halaman untuk dimuat di perangkat seluler.

1. Klik dropdown Throttling, yang disetel ke Online secara default.

   

   Gambar 9. Mengaktifkan throttling

2. Pilih 3G lambat.

   

   Gambar 10. Memilih 3G Lambat

3. Tekan lama Reload , lalu pilih Empty Cache And Hard Reload.

   

   Gambar 11. Kosongkan Cache dan Muat Ulang Hard

   Pada kunjungan berulang, browser biasanya menayangkan beberapa file dari cache, yang mempercepat pemuatan halaman. Empty Cache And Hard Reload memaksa browser masuk ke jaringan untuk semua resource. Metrik ini berguna jika Anda ingin melihat pengalaman pengunjung pertama kali saat halaman dimuat.

   Catatan: Catatan Alur kerja Empty Cache And Hard Reload hanya tersedia saat DevTools terbuka.

Mengambil screenshot

Screenshot memungkinkan Anda melihat tampilan halaman dari waktu ke waktu saat sedang dimuat.

1. Klik Capture Screenshots .

2. Muat ulang halaman lagi melalui alur kerja Empty Cache And Hard Reload. Lihat Menyimulasikan koneksi yang lebih lambat jika Anda memerlukan pengingat tentang cara melakukannya. Panel Screenshot menyediakan thumbnail yang menunjukkan cara halaman melihat berbagai titik selama proses pemuatan.

   

   Gambar 12. Screenshot pemuatan halaman

3. Klik thumbnail pertama. DevTools menunjukkan aktivitas jaringan apa yang terjadi pada saat itu.

   

   Gamabar 13. Aktivitas jaringan yang terjadi saat screenshot pertama

4. Klik Capture Screenshots lagi untuk menutup panel Screenshot.

5. Muat ulang halaman.

Memeriksa detail resource

Klik referensi untuk mempelajarinya lebih lanjut. Coba sekarang:

1. Klik getstarted.html. Tab Header ditampilkan. Gunakan tab ini untuk memeriksa header HTTP.

   

   Gambar 14. Tab Header

2. Klik tab Preview. Rendering dasar HTML ditampilkan.

   

   Gambar 15. Tab Pratinjau

   Tab ini berguna saat API menampilkan kode error dalam HTML dan lebih mudah untuk membaca HTML yang dirender daripada kode sumber HTML, atau saat memeriksa gambar.

3. Klik tab Response. Kode sumber HTML ditampilkan.

   

   Gambar 16. Tab Respons

   Catatan: Tips Jika file diperkecil, klik tombol Format di bagian bawah tab Response akan memformat ulang konten file agar mudah dibaca.

4. Klik tab Waktu. Perincian aktivitas jaringan untuk resource ini ditampilkan.

   

   Gambar 17. Tab Waktu

5. Klik Close untuk melihat Log Jaringan lagi.

   

   Gambar 18. Tombol Tutup

Telusuri header dan respons jaringan

Gunakan panel Search jika Anda perlu menelusuri header HTTP dan respons semua resource untuk string atau ekspresi reguler tertentu.

Misalnya, Anda ingin memeriksa apakah resource Anda menggunakan kebijakan cache yang wajar.

1. Klik Telusuri . Panel Search terbuka di sebelah kiri log Jaringan.

   

   Gambar 19. Panel Penelusuran

2. Ketik Cache-Control lalu tekan Enter. Panel Search mencantumkan semua instance Cache-Control yang ditemukan di header atau konten resource.

   

   Gambar 20. Hasil penelusuran untuk Cache-Control

3. Klik hasil untuk melihatnya. Jika kueri ditemukan di header, tab Header akan terbuka. Jika kueri ditemukan di konten, tab Respons akan terbuka.

   

   Gambar 21. Hasil penelusuran ditandai di tab Header

4. Tutup panel Search dan tab Timing.

   

   Gambar 22. Tombol Tutup

Memfilter resource

DevTools menyediakan banyak alur kerja untuk memfilter resource yang tidak relevan dengan tugas yang sedang dikerjakan.

Gambar 23. Toolbar Filter

Toolbar Filter akan diaktifkan secara default. Jika tidak:

1. Klik Filter untuk menampilkannya.

Filter menurut string, ekspresi reguler, atau properti

Kotak teks Filter mendukung berbagai jenis pemfilteran.

1. Ketikkan png di kotak teks Filter. Hanya file yang berisi teks png yang ditampilkan. Dalam hal ini, satu-satunya file yang cocok dengan filter adalah gambar PNG.

   

   Gambar 24. Filter string

2. Ketik /.*\.[cj]s+$/. DevTools memfilter resource apa pun yang memiliki nama file yang tidak diakhiri dengan j atau c yang diikuti dengan 1 atau beberapa karakter s.

   

   Gambar 25. Filter ekspresi reguler

3. Ketik -main.css. DevTools memfilter main.css. Jika ada file lain yang cocok dengan pola yang sama, file tersebut juga akan disaring.

   

   Gambar 26. Filter negatif

4. Ketikkan domain:raw.githubusercontent.com di kotak teks Filter. DevTools memfilter semua resource dengan URL yang tidak cocok dengan domain ini.

   

   Gambar 27. Filter properti

   Lihat Memfilter permintaan menurut properti untuk melihat daftar lengkap properti yang dapat difilter.

5. Hapus centang pada kotak teks Filter dari teks mana pun.

Filter menurut jenis resource

Untuk berfokus pada jenis file tertentu, seperti stylesheet:

1. Klik CSS. Semua jenis {i>file<i} lainnya disaring.

   

   Gambar 28. Hanya menampilkan file CSS

2. Untuk melihat skrip juga, tahan Control atau Command (Mac), lalu klik JS.

   

   Gambar 29. Hanya menampilkan file CSS dan JS

3. Klik Semua untuk menghapus filter dan melihat semua referensi lagi.

Lihat Memfilter permintaan untuk alur kerja pemfilteran lainnya.

Blokir permintaan

Bagaimana tampilan dan perilaku halaman saat beberapa resource-nya tidak tersedia? Apakah gagal sepenuhnya, atau masih berfungsi? Blokir permintaan untuk mencari tahu:

1. Tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Perintah.

   

   Gambar 30. Menu Perintah

2. Ketik block, pilih Show Request Blocking, lalu tekan Enter.

   

   Gambar 31. Tampilkan Pemblokiran Permintaan

3. Klik Tambahkan Pola .

4. Ketik main.css.

   

   Gambar 32. Memblokir main.css

5. Klik Tambahkan.

6. Muat ulang halaman. Seperti yang diharapkan, gaya halaman sedikit berantakan karena stylesheet utamanya telah diblokir. Perhatikan baris main.css di Log Jaringan. Teks merah berarti bahwa resource diblokir.

   

   Gambar 33. main.css telah diblokir

7. Hapus centang pada kotak Aktifkan pemblokiran permintaan.

Langkah berikutnya

Selamat, Anda telah menyelesaikan tutorial ini. Klik Berikan Penghargaan untuk menerima penghargaan Anda.

Lihat Referensi Jaringan untuk menemukan fitur DevTools lainnya yang terkait dengan pemeriksaan aktivitas jaringan.