Memeriksa aktivitas jaringan

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.

    Demo

    Gambar 1. Demo

    Anda dapat memindahkan demo ke jendela terpisah.

    Demo di satu jendela dan tutorial ini di jendela lain

    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.

    Console

    Gambar 3. Console

    Anda mungkin memilih untuk menempatkan DevTools ke bagian bawah jendela.

    DevTools dipasang ke bagian bawah jendela

    Gambar 4. DevTools dipasang ke bagian bawah jendela

  3. Klik tab Network Panel Jaringan akan terbuka.

    DevTools dipasang ke bagian bawah jendela

    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.

    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.
  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.

    Resource baru di Log Jaringan

    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.

    Mengaktifkan kolom Domain

    Gambar 8. Mengaktifkan kolom Domain

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.

    Mengaktifkan throttling

    Gambar 9. Mengaktifkan throttling

  2. Pilih 3G lambat.

    Memilih 3G Lambat

    Gambar 10. Memilih 3G Lambat

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

    Kosongkan Cache dan Muat Ulang Hard

    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.

Mengambil screenshot

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

  1. Klik Capture Screenshots Mengambil Screenshot.
  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.

    Screenshot pemuatan halaman

    Gambar 12. Screenshot pemuatan halaman

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

    Aktivitas jaringan yang terjadi saat screenshot pertama

    Gamabar 13. Aktivitas jaringan yang terjadi saat screenshot pertama

  4. Klik Capture Screenshots Mengambil Screenshot 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.

    Tab Header

    Gambar 14. Tab Header

  2. Klik tab Preview. Rendering dasar HTML ditampilkan.

    Tab Pratinjau

    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.

    Tab Respons

    Gambar 16. Tab Respons

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

    Tab Waktu

    Gambar 17. Tab Waktu

  5. Klik Close Tutup untuk melihat Log Jaringan lagi.

    Tombol Tutup

    Gambar 18. Tombol Tutup

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 Telusuri. Panel Search terbuka di sebelah kiri log Jaringan.

    Panel Penelusuran

    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.

    Hasil penelusuran untuk Cache-Control

    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.

    Hasil penelusuran ditandai di tab Header

    Gambar 21. Hasil penelusuran ditandai di tab Header

  4. Tutup panel Search dan tab Timing.

    Tombol Tutup

    Gambar 22. Tombol Tutup

Memfilter resource

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

Toolbar Filter

Gambar 23. Toolbar Filter

Toolbar Filter akan diaktifkan secara default. Jika tidak:

  1. Klik Filter 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.

    Filter string

    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.

    Filter ekspresi reguler

    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.

    Filter negatif

    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.

    Filter properti

    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.

    Hanya menampilkan file CSS

    Gambar 28. Hanya menampilkan file CSS

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

    Hanya menampilkan file CSS dan 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.

    Menu Perintah

    Gambar 30. Menu Perintah

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

    Tampilkan Pemblokiran Permintaan

    Gambar 31. Tampilkan Pemblokiran Permintaan

  3. Klik Tambahkan Pola Tambahkan Pola.

  4. Ketik main.css.

    Memblokir main.css

    Gambar 32. Memblokir main.css

  5. Klik Add.

  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.

    main.css telah 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.