Memeriksa aktivitas jaringan

Kayce Basques

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

Lihat Referensi Jaringan jika Anda ingin menjelajahi fitur.

Baca terus, atau tonton video dari 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 yang paling umum untuk panel Jaringan adalah:

• Memastikan bahwa resource benar-benar diupload atau didownload.
• 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 panel ini 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 coba fitur di halaman demo.

1. Buka Demo Mulai.

   

   Anda mungkin lebih suka memindahkan demo ke jendela terpisah.

   

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

   

   Anda mungkin lebih suka menambatkan DevTools ke bagian bawah jendela.

   

3. Klik tab Jaringan. Panel Jaringan akan terbuka.

   

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.

Log aktivitas jaringan

Untuk melihat aktivitas jaringan yang disebabkan oleh halaman:

1. Muat ulang halaman. Panel Jaringan mencatat semua aktivitas jaringan di 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. Kolom defaultnya adalah:

   • Status: Kode respons HTTP.
   • Type: Jenis resource.
   • Pemrakarsa: Penyebab resource diminta. Mengklik link di kolom Penginisi akan mengarahkan Anda ke kode sumber yang menyebabkan permintaan.
   • Ukuran: Jumlah resource yang ditransfer melalui jaringan.
   • Waktu: Lamanya waktu permintaan.
   Catatan: Grafik di atas Log Jaringan disebut Ringkasan. Anda tidak akan menggunakannya dalam tutorial ini, sehingga Anda dapat menyembunyikannya jika mau. Lihat Menyembunyikan jalur Ringkasan.

2. Selama Anda membuka DevTools, DevTools akan merekam aktivitas jaringan di Log Jaringan. Untuk menunjukkan hal ini, lihat bagian bawah Log Jaringan terlebih dahulu dan catat aktivitas terakhir.

3. Sekarang, klik tombol Get Data di demo.

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

   

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.

   

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

Simulasikan 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 throttling halaman, Anda bisa mendapatkan gambaran yang lebih baik tentang waktu yang diperlukan halaman untuk dimuat di perangkat seluler.

1. Klik drop-down Throttling, yang disetel ke No throttling secara default.

   

2. Pilih 3G.

   

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

   

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

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

Mengambil screenshot

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

Untuk mengambil screenshot, ikuti langkah-langkah berikut:

1. Klik setelan Setelan Jaringan.

2. Aktifkan kotak centang check_box Screenshots.

3. Muat ulang halaman lagi menggunakan alur kerja Empty Cache And Hard Reload. Lihat Menyimulasikan koneksi yang lebih lambat jika Anda memerlukan pengingat tentang cara melakukannya. Tab Screenshot menyediakan thumbnail yang menampilkan tampilan halaman ke berbagai titik selama proses pemuatan.

   

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

   

5. Alihkan kotak centang Screenshot untuk menutup tab Screenshot.

6. Muat ulang halaman tersebut.

Memeriksa detail resource

Klik referensi untuk mempelajari informasi selengkapnya tentang referensi tersebut. Coba sekarang:

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

   

2. Klik tab Preview untuk melihat rendering HTML dasar.

   

   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 untuk melihat kode sumber HTML.

   

   Tips: Saat file diminifikasi, mengklik tombol Format data_object di bagian bawah tab Response akan memformat ulang konten file agar mudah dibaca.

4. Klik tab Initiator untuk melihat hierarki yang memetakan rantai inisiator permintaan.

   

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

   

6. Klik Close close untuk melihat kembali Log Jaringan.

   

Telusuri header dan respons jaringan

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

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

1. Klik Telusuri telusuri. Tab Telusuri akan terbuka di sebelah kiri Log jaringan.

   

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

   

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

   

4. Tutup tab Penelusuran dan tab Header.

   

Memfilter resource

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

Panel alat Filter akan diaktifkan secara default. Jika tidak:

1. Klik Filter filter_alt untuk menampilkannya.

Filter menurut string, ekspresi reguler, atau properti

Kotak input Filter mendukung berbagai jenis pemfilteran.

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

   

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

   

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

   

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

   

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

5. Kosongkan kotak input Filter dari teks apa pun.

Memfilter menurut jenis resource

Untuk berfokus pada jenis file tertentu, seperti stylesheet:

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

   

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

   

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

Lihat Memfilter permintaan untuk mengetahui alur kerja pemfilteran lainnya.

Memblokir permintaan

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

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

   

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

   

3. Klik tombol Tambahkan Pola.

4. Ketik main.css.

   

5. Klik Tambahkan.

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

   

7. Hapus centang pada kotak Aktifkan pemblokiran permintaan.

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