Permintaan jaringan: Uji situs Anda dengan memblokir atau mem-throttle permintaan jaringan

Ewa Gasperowicz

Gunakan panel Kondisi permintaan untuk menguji perilaku halaman Anda jika resource tertentu, seperti gambar atau stylesheet, dicegah agar tidak dimuat atau jika resource dimuat lebih lambat.

Ringkasan

Panel Kondisi permintaan memungkinkan Anda memblokir beberapa resource atau "pola" secara bersamaan dan mengaktifkan/menonaktifkannya dari daftar. Anda juga dapat memblokir domain atau URL permintaan jaringan dari panel Network dan pola yang sesuai akan muncul di panel Request conditions.

Panel samping Kondisi permintaan memungkinkan Anda:

  • Menambahkan atau menghapus pola.
  • Edit pola.
  • Hapus semua pola.
  • Mengaktifkan atau menonaktifkan pemblokiran atau throttling permintaan jaringan. Setelah diaktifkan, Anda dapat mengalihkan pemblokiran atau pembatasan untuk setiap pola.

Menutup DevTools akan menonaktifkan pemblokiran dan throttling permintaan jaringan. Anda harus membuka panel dan mengaktifkan pemblokiran lagi. Namun, DevTools menyimpan pola meskipun browser ditutup.

Memblokir atau membatasi permintaan jaringan

Anda dapat memblokir permintaan jaringan dari panel Network di DevTools.

  1. Di panel Network, di bagian Name, klik kanan permintaan, lalu pilih Block request atau Throttle request. gambar
  2. Panel Kondisi permintaan akan otomatis terbuka dan mencantumkan pola yang relevan sebagai diblokir atau dibatasi. Tindakan ini juga otomatis mencentang kotak Enable blocking and throttling.

Memahami permintaan mana yang dibatasi atau diblokir

Untuk membedakan permintaan yang lambat dan permintaan yang dibatasi oleh DevTools, Anda dapat memeriksa panel Jaringan dan Performa.

Di panel Jaringan:

  • Permintaan yang Diblokir: Periksa kolom Status. Permintaan yang diblokir akan ditampilkan secara eksplisit (blocked:devtools) dan akan berwarna merah.
  • Permintaan yang Dibatasi: Ikon berwarna emas atau cokelat akan muncul di samping URL permintaan. Atau, Anda juga dapat memeriksa kolom Waktu. Ikon akan muncul di samping waktu.
    • Arahkan kursor ke ikon untuk melihat kondisi jaringan mana yang telah diterapkan.
    • Klik ikon untuk segera membuka panel Kondisi permintaan dan menandai aturan yang bertanggung jawab atas pembatasan.

Panel Jaringan di DevTools yang menampilkan indikator permintaan yang diblokir dan dibatasi.

Di panel Performa: Anda juga dapat mencari kondisi jaringan saat merekam profil performa. Untuk melakukannya:

  1. Buka panel Performance dan rekam aktivitas.
  2. Temukan permintaan di jalur Jaringan.
  3. Arahkan kursor ke permintaan untuk melihat tooltip yang menjelaskan kondisi jaringan yang diterapkan.

Membuka panel samping Kondisi permintaan

Untuk membuka panel samping Kondisi permintaan:

  1. Buka DevTools.
  2. Buka Menu perintah dengan menekan:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P Menu Perintah dengan
  3. Mulai ketik Request conditions, pilih Tampilkan kondisi Permintaan, lalu tekan Enter. DevTools menampilkan panel Kondisi permintaan di bagian bawah jendela DevTools.

Atau, di sudut kanan atas, pilih Alat lainnya > Kondisi permintaan.

Mengubah setelan pembatasan

Untuk menyesuaikan setelan pembatasan:

  1. Buka panel Kondisi permintaan, lalu buka permintaan tertentu.
  2. Di kolom Pembatasan, pilih preset (misalnya, 3G Lambat, 3G Cepat) dari menu drop-down. Anda juga dapat menambahkan profil jaringan kustom.

Mengubah pola permintaan

Untuk mengubah pola, di panel Kondisi permintaan, klik tombol Edit di samping pola, edit, lalu klik Simpan. Anda juga dapat mengklik tombol Tambahkan kondisi untuk membuat kondisi baru. Saat memasukkan pola URL, Anda dapat menggunakan karakter pengganti (*) untuk mencocokkan bagian dinamis URL. Misalnya, *://example.com akan mencocokkan semua permintaan API ke domain tersebut. Anda dapat menggunakan karakter pengganti untuk menerapkan kondisi ke beberapa resource sekaligus menggunakan URL Pattern API.

Mengganti pemblokiran permintaan jaringan

Kotak centang Aktifkan pemblokiran dan throttling memungkinkan Anda mengaktifkan dan menonaktifkan pemblokiran permintaan jaringan untuk semua pola sekaligus.

Mengatur ulang pola pencocokan URL

Jika permintaan cocok dengan beberapa pola, DevTools akan menerapkan aturan pertama yang ditemukan. Untuk mengontrol prioritas ini, klik tombol panah di samping aturan tertentu di panel Kondisi permintaan untuk memindahkan aturan prioritas tinggi ke bagian atas daftar.

Menghapus pola pemblokiran permintaan jaringan

Untuk menghapus pola pemblokiran permintaan jaringan tertentu dari daftar:

  • Di panel Kondisi permintaan, klik tombol Hapus.

Untuk menghapus semua pola pemblokiran permintaan jaringan, di panel aktivitas, klik tombol Hapus semua pola pemblokiran jaringan.