Di Chrome DevTools, panel Jaringan yang menawarkan insight berharga tentang aktivitas jaringan halaman web adalah salah satu alat yang paling sering digunakan.
Artikel ini membagikan serangkaian peningkatan yang sangat diinginkan pada panel Jaringan yang dibuat Ioana Forfota dan Silvia Eremia selama magang STEP mereka. Peningkatan ini telah lama dinantikan dan dipilih dengan cermat dari backlog yang luas di issue tracker Chromium dan membuat panel lebih mudah diakses, intuitif, dan informatif.
Dengan fitur baru ini, panel Jaringan memberi developer web kemampuan untuk:
- Fokus hanya pada permintaan jaringan yang relevan.
- Memahami 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 bersama permintaan halaman di panel Jaringan. Jika Anda tidak aktif mengembangkan ekstensi, permintaan ini mungkin tidak relevan bagi Anda. Sebelumnya, satu-satunya cara untuk menyembunyikannya adalah dengan menggunakan filter -scheme:chrome-extension atau debug dalam mode Samaran.
Mulai Chrome 117, proses ini menjadi lebih mudah. Untuk merapikan panel Jaringan, DevTools kini menawarkan kotak centang untuk mengecualikan permintaan ekstensi Chrome.
Diskusi terkait status default fitur ini telah berlangsung. Awalnya, kami mempertimbangkan untuk mengaktifkannya secara default, dengan ide bahwa fitur ini dapat meningkatkan pengalaman bagi sebagian besar pengguna. Namun, pendekatan ini mungkin membuat beberapa pengguna tidak menyadari bahwa URL ekstensi Chrome dapat memicu permintaan. Hal ini juga dapat menimbulkan tantangan bagi developer ekstensi. Oleh karena itu, status default ditetapkan ke 'dinonaktifkan'.
Jika kotak centang ini diaktifkan, daftar permintaan Anda akan lebih rapi, tidak terlalu mengganggu, dan lebih berfokus pada permintaan yang paling penting, sehingga Anda dapat memiliki 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 menelusuri artinya bisa merepotkan. DevTools telah memperkenalkan peningkatan yang bermanfaat: saat Anda mengarahkan kursor ke kode status dalam daftar permintaan, tooltip akan langsung memberikan teks statusnya–judul deskriptif yang menjelaskan maknanya.
Teks status juga terlihat di tampilan header tepat di samping kode. Meskipun sebelumnya hanya tersedia untuk HTTP/1.1, fitur ini kini diperluas ke HTTP/2 dan HTTP/3. Penyesuaian yang tampaknya kecil ini memiliki dampak yang signifikan, sehingga menghemat waktu dan memungkinkan Anda berfokus pada proses debug, bukan mencari arti kode.
Visibilitas error yang ditingkatkan
Kami telah mempermudah Anda menemukan error dengan cepat dan mengatasinya tanpa harus melihat panel secara mendalam. 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 berguna ini akan membuat error lebih terlihat, sehingga memastikan Anda tidak mengabaikan masalah penting.
Mencetak subjenis JSON dengan format yang menarik
Pengembangan web sering kali melibatkan pemeriksaan respons JSON, tetapi membaca JSON mentah yang tidak diformat sangat tidak praktis. Menangani respons tersebut, terutama subjenis seperti ld+json, hal+json, atau sparql-results+json, mungkin merepotkan, misalnya saat subjenis tersebut muncul dalam satu baris. Untuk mempermudah, DevTools telah memperkenalkan presentasi yang dapat diciutkan dan lebih mudah digunakan untuk subjenis JSON. Sekarang, respons ini diformat, sehingga developer tidak perlu 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 penerapan, respons komunitas sangat positif. Penerapan yang berhasil membuat banyak pengguna senang dengan peningkatan tersebut, yang secara signifikan meningkatkan pengalaman mereka. Anda dapat membaca beberapa respons di X:
"Oh, keren! ChromeDevTools baru saja meningkatkan kualitasnya dengan menampilkan kode status HTTP yang dapat dibaca manusia, sehingga mempermudah untuk melihat masalah yang terjadi pada permintaan jaringan."—TribalIdeas on X
"Baru-baru ini, fitur ini sangat membantu. Terutama saat menangani formulir dengan pemblokir iklan dan ekstensi tata bahasa."-MrAhmadAwais di X
Siap menjelajahi fitur baru ini? Buka Chrome DevTools dan rasakan sendiri panel Jaringan yang ditingkatkan. Selamat melakukan proses debug!
Mendownload saluran pratinjau
Sebaiknya gunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna menemukannya.
Hubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.
- Kirim masukan dan permintaan fitur kepada kami di crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
- Tweet ke @ChromeDevTools.
- Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.