Memeriksa aktivitas jaringan

Kayce Basques
Kayce Basques
X GitHub

Ini adalah tutorial praktik tentang beberapa fitur DevTools yang paling umum digunakan terkait pemeriksaan aktivitas jaringan halaman.

Lihat Referensi Jaringan jika Anda ingin menjelajahi fitur.

Baca terus, atau tonton versi video tutorial ini:

Kapan harus menggunakan panel Jaringan

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

  • Memastikan bahwa resource benar-benar diupload atau didownload.
  • Memeriksa properti resource individual, 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 panel ini memberikan saran yang ditargetkan tentang cara meningkatkan kualitas halaman Anda. Lihat Mengoptimalkan Kecepatan Situs.

Membuka panel Jaringan

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

  1. Buka Demo Memulai.

    Situs demo.

    Anda mungkin lebih suka memindahkan demo ke jendela terpisah.

    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.

    Panel Konsol di Devtools.

    Anda mungkin lebih suka menyematkan DevTools ke bagian bawah jendela.

    DevTools di-dock ke bagian bawah jendela.

  3. Klik tab Jaringan. Panel Jaringan akan terbuka.

    Panel Jaringan Devtools dikaitkan ke bagian bawah jendela.

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

Mencatat 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 dengan 5 permintaan.

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

    Setiap kolom mewakili informasi tentang resource. Kolom defaultnya adalah:

    • Status: Kode respons HTTP.
    • Jenis: Jenis resource.
    • Inisiator: Penyebab resource diminta. Mengklik link di kolom Inisiator akan membawa Anda ke kode sumber yang menyebabkan permintaan.
    • Ukuran: Jumlah resource yang ditransfer melalui jaringan.
    • Waktu: Durasi permintaan.

  2. Selama DevTools terbuka, DevTools akan mencatat aktivitas jaringan di Log Jaringan. Untuk mendemonstrasikan hal ini, pertama-tama lihat bagian bawah Log Jaringan dan catat aktivitas terakhir.

  3. Sekarang, klik tombol Dapatkan Data di demo.

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

    Resource baru di Log Jaringan.

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

Menyimulasikan koneksi jaringan yang lebih lambat

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

  1. Klik drop-down Pembatasan, yang disetel ke Tidak ada pembatasan secara default.

    Menu drop-down throttling di panel Jaringan.

  2. Pilih 3G.

    Memilih 3G di panel Jaringan.

  3. Tekan lama tombol muat ulang Muat Ulang , lalu pilih Kosongkan Cache dan Muat Ulang Keras.

    Kosongkan Cache dan Muat Ulang Keras.

    Pada kunjungan berulang, browser biasanya menyajikan beberapa file dari cache-nya, yang mempercepat pemuatan halaman. Kosongkan Cache dan Muat Ulang Keras memaksa browser untuk membuka jaringan untuk semua resource. Hal ini berguna jika Anda ingin melihat pengalaman pemuatan halaman oleh pengunjung pertama kali.

Mengambil screenshot

Screenshot mengambil tampilan halaman Anda pada waktu yang berbeda saat halaman dimuat, dan melaporkan resource yang dimuat pada setiap interval.

Untuk mengambil screenshot, ikuti langkah-langkah berikut:

  1. Klik Setelan Jaringan .

  2. Aktifkan kotak centang Screenshot .

  3. Muat ulang halaman lagi menggunakan alur kerja Kosongkan Cache dan Muat Ulang Keras. Lihat Menyimulasikan koneksi yang lebih lambat jika Anda memerlukan pengingat tentang cara melakukannya. Tab Screenshot menyediakan thumbnail tampilan halaman pada berbagai titik selama proses pemuatan.

    Screenshot pemuatan halaman di panel Jaringan.

  4. Klik thumbnail pertama. DevTools akan menampilkan aktivitas jaringan yang terjadi pada saat itu.

    Aktivitas jaringan yang terjadi selama screenshot pertama.

  5. Alihkan kotak centang Screenshot untuk menutup tab Screenshot.

  6. Muat ulang halaman lagi.

Memeriksa detail resource

Klik resource untuk mempelajari informasi selengkapnya. Coba sekarang:

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

    Tab Header di panel Jaringan.

  2. Klik tab Pratinjau untuk melihat rendering HTML dasar.

    Tab Preview di panel Network.

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

  3. Klik tab Respons untuk melihat kode sumber HTML.

    Tab Respons di panel Jaringan.

  4. Klik tab Inisiator untuk melihat diagram yang memetakan rantai inisiator permintaan.

    Tab Pemrakarsa di panel Jaringan.

  5. Klik tab Waktu untuk melihat perincian aktivitas jaringan untuk resource ini.

    Tab Waktu di panel Jaringan.

  6. Klik Tutup untuk melihat Log Jaringan lagi.

    Tombol Tutup untuk tab detail.

Gunakan tab Penelusuran saat Anda perlu menelusuri header dan respons HTTP dari semua resource untuk string atau ekspresi reguler tertentu.

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

  1. Klik Penelusuran di panel tindakan atau tekan Command + F (macOS) atau Control + F (Windows / Linux).

    Tab Penelusuran akan terbuka di sebelah kiri Log jaringan.

    Tab Penelusuran di sebelah kiri log Jaringan.

  2. Ketik Cache-Control, lalu tekan Enter. Tab Penelusuran mencantumkan semua instance Cache-Control yang ditemukan di header atau konten resource.

    Hasil penelusuran untuk Cache-Control.

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

    Hasil penelusuran yang ditandai di tab Header.

  4. Tutup tab Penelusuran dan tab Header.

    Tombol Tutup.

Memfilter resource

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

Toolbar Filter.

Toolbar Filter harus diaktifkan secara default. Jika tidak:

  1. Klik Filter untuk menampilkannya.

Memfilter menurut string, ekspresi reguler, atau properti

Kotak input Filter mendukung berbagai jenis pemfilteran.

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

    Pemfilteran string di log Jaringan.

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

    Hasil filter ekspresi reguler di log Jaringan.

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

    Pemfilteran negatif menghasilkan log Jaringan.

  4. Ketik domain:raw.githubusercontent.com ke dalam kotak teks Filter. DevTools memfilter resource apa pun dengan URL yang tidak cocok dengan domain ini.

    Pemfilteran properti di Log jaringan.

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

  5. Hapus teks apa pun dari kotak input Filter.

Memfilter menurut jenis resource

Untuk berfokus pada jenis file tertentu, seperti stylesheet:

  1. Klik CSS. Semua jenis file lainnya akan difilter.

    Panel Jaringan hanya menampilkan file CSS.

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

    Panel Jaringan hanya menampilkan file CSS dan JS.

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

Lihat Memfilter permintaan untuk alur kerja pemfilteran lainnya.

Memblokir permintaan

Bagaimana tampilan dan perilaku halaman jika beberapa resource-nya tidak tersedia? Apakah halaman tersebut gagal sepenuhnya, atau masih berfungsi? Blokir permintaan untuk mengetahuinya:

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

    Menu Perintah di panel Jaringan.

  2. Ketik block, pilih Tampilkan Pemblokiran Permintaan, lalu tekan Enter.

    Opsi 'Tampilkan Pemblokiran Permintaan'.

  3. Klik tombol Tambahkan Pola.

  4. Ketik main.css.

    Memblokir main.css di panel Jaringan

  5. Klik Tambahkan.

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

    main.css telah diblokir.

  7. Hapus centang kotak Aktifkan pemblokiran permintaan.

Untuk menemukan fitur DevTools lainnya yang terkait dengan pemeriksaan aktivitas jaringan, lihat Referensi Jaringan.