Di Chrome DevTools, panel Jaringan yang menawarkan insight berharga tentang aktivitas jaringan halaman web adalah salah satu alat yang paling sering digunakan.
Artikel ini menyampaikan serangkaian peningkatan yang sangat diinginkan pada panel Network yang dibuat Ioana Forfota dan Silvia Eremia selama magang di STEP. Peningkatan ini sangat dinanti-nantikan dan dipilih dengan cermat dari banyak backlog yang ekstensif di Issue Tracker Chromium, serta membuat panel menjadi lebih mudah diakses, intuitif, dan informatif.
Dengan fitur baru ini, panel Jaringan memberi developer web kemampuan untuk:
- Fokus hanya pada permintaan jaringan yang relevan.
- Pahami kode status HTTP tanpa memerlukan referensi eksternal.
- Mengidentifikasi dan mengatasi error permintaan dengan cepat.
- Memahami respons subjenis JSON.
Baca terus untuk mengetahui semua detailnya.
Memfilter permintaan ekstensi Chrome
Ekstensi Chrome dapat membuat permintaan jaringannya sendiri, yang muncul di samping permintaan halaman di panel Jaringan. Jika Anda tidak mengembangkan ekstensi secara aktif, permintaan ini kemungkinan tidak akan relevan bagi Anda. Sebelumnya, satu-satunya cara untuk menyembunyikannya adalah dengan menggunakan filter -scheme:chrome-extension atau debug dalam mode Samaran.
Mulai Chrome 117, hal ini menjadi lebih mudah. Untuk merapikan panel Jaringan, DevTools kini menawarkan kotak centang untuk mengecualikan permintaan ekstensi Chrome.
Diskusi mengenai status default fitur ini sedang berlangsung. Awalnya, kami mempertimbangkan untuk mengaktifkannya secara default, dengan pemikiran bahwa fitur ini dapat meningkatkan pengalaman bagi sebagian besar pengguna. Namun, pendekatan ini mungkin membuat beberapa pengguna tidak mengetahui bahwa URL ekstensi Chrome dapat memicu permintaan. Hal ini juga dapat menimbulkan tantangan bagi developer ekstensi. Oleh karena itu, status default disetel ke 'dinonaktifkan'.
Dengan mengaktifkan kotak centang ini, daftar permintaan Anda akan lebih rapi, tidak terlalu mengganggu, dan lebih fokus pada permintaan yang paling penting, sehingga Anda bisa mendapatkan pengalaman proses debug yang jauh lebih menyenangkan.
Teks status respons HTTP
Memahami kode status HTTP sangat penting untuk proses debug yang efektif. Namun, terus-menerus mencari artinya mungkin tidak nyaman. DevTools telah memperkenalkan peningkatan yang berguna: saat Anda mengarahkan kursor ke kode status dalam daftar permintaan, tooltip akan langsung memberikan teks statusnya–judul deskriptif yang menjelaskan artinya.
Teks status juga terlihat dalam tampilan header tepat di samping kode. Meskipun sebelumnya hanya tersedia untuk HTTP/1.1, fitur ini sekarang diperluas ke HTTP/2 dan HTTP/3. Penyesuaian yang tampaknya kecil ini memiliki dampak yang signifikan, menghemat waktu Anda dan memungkinkan Anda untuk berfokus pada proses debug daripada menelusuri arti kode.
Visibilitas error yang lebih baik
Kami telah mempermudah cara menemukan error dengan cepat dan mengatasinya tanpa harus menggali lebih dalam panel. Untuk mencapai hal ini, kami tidak hanya menandai pesan error dengan perubahan warna teks, tetapi juga menambahkan ikon indikatif untuk menarik perhatian ke error permintaan, seperti error dengan kode status 404. Indikator yang halus namun bermanfaat ini akan membuat kesalahan lebih terlihat, memastikan Anda tidak mengabaikan masalah yang penting.
Subjenis JSON pretty-printing
Pengembangan web sering kali melibatkan pemeriksaan respons JSON, tetapi membaca JSON mentah yang tidak diformat sangat merepotkan. Berurusan dengan respons tersebut, khususnya subjenis seperti ld+json, hal+json, atau sparql-results+json, mungkin menjengkelkan, misalnya jika muncul dalam satu baris. Untuk mempermudah, DevTools telah memperkenalkan presentasi yang lebih mudah digunakan dan dapat diciutkan untuk subjenis JSON. Kini, respons ini telah diformat sehingga developer tidak perlu lagi mengandalkan alat eksternal. Desain ulang ini menawarkan representasi yang sederhana dan sangat mudah dibaca.
Masukan positif dari komunitas
Meskipun fitur ini baru dalam tahap awal penggunaan, respons komunitas sangat positif. Keberhasilan penerapan membuat banyak pengguna senang dengan peningkatan yang dilakukan, yang secara signifikan meningkatkan pengalaman mereka. Anda dapat membaca beberapa respons di X:
"Oh, bagus! ChromeDevTools baru saja meningkatkan game-nya dengan menampilkan kode status HTTP yang dapat dibaca manusia, sehingga lebih mudah untuk melihat apa yang salah dengan permintaan jaringan."—TribalIdeas di X
"Akhir-akhir ini, saya sangat membantu. Terutama menangani formulir yang menggunakan pemblokir iklan dan ekstensi tata bahasa."-MrAhmadAwais di X
Siap untuk menjelajahi fitur baru ini? Buka Chrome DevTools dan rasakan sendiri panel Jaringan yang ditingkatkan. Selamat melakukan proses debug!
Mendownload saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.