Memeriksa aktivitas jaringan

Kayce Basques

Ini adalah tutorial langsung tentang beberapa fitur DevTools yang paling sering digunakan terkait memeriksa 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 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 Memulai.

   

   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. Resource teratas biasanya adalah dokumen HTML utama. Resource bawah adalah apa pun yang diminta terakhir.

   Setiap kolom mewakili informasi tentang resource. Kolom defaultnya adalah:

   • Status: Kode respons HTTP.
   • Type: Jenis resource.
   • Pemrakarsa: Penyebab resource diminta. Mengklik link di kolom Penginisiasi akan mengarahkan Anda ke kode sumber yang menyebabkan permintaan.
   • Ukuran: Jumlah resource yang ditransfer melalui jaringan.
   • Waktu: Berapa lama permintaan berlangsung.
   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 bernama 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.

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

1. Klik drop-down Throttling, yang ditetapkan 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 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.

   

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

   

5. Alihkan tombol centang Screenshot untuk menutup tab Screenshot.

6. Muat ulang halaman tersebut.

Memeriksa detail resource

Klik referensi untuk mempelajari informasi selengkapnya. Coba sekarang:

1. Klik getstarted.html. Tab Header akan 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 Log Jaringan lagi.

   

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

Memfilter menurut string, ekspresi reguler, atau properti

Kotak input Filter mendukung berbagai jenis pemfilteran.

1. Ketik png di 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. Ketik domain:raw.githubusercontent.com ke dalam kotak teks Filter. DevTools memfilter resource apa pun dengan URL yang tidak cocok dengan domain ini.

   

   Lihat Memfilter permintaan menurut properti untuk mengetahui 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 halaman sedikit berantakan karena sheet gaya utama telah diblokir. Perhatikan baris main.css di Log Jaringan. Teks merah berarti resource diblokir.

   

7. Hapus centang pada kotak Enable request blocking.

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