Yang baru di DevTools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Memahami error dan peringatan di Konsol dengan lebih baik menggunakan Gemini

Versi Chrome ini menghadirkan kemampuan AI generatif ke Konsol DevTools, bertujuan untuk memberi Anda pemahaman yang lebih baik tentang error dan peringatan yang Anda temui.

Untuk mendapatkan penjelasan error atau peringatan yang dibuat AI, klik tombol Percikan bohlam. Pahami error (peringatan) ini di samping pesan di Konsol dan ikuti petunjuknya.

Penjelasan error yang dibuat AI.

Untuk mengetahui informasi selengkapnya, lihat Memahami error dan peringatan dengan lebih baik menggunakan AI.

Dukungan aturan @position-try di Elemen > Gaya

Untuk membantu Anda men-debug pemosisian anchor CSS, tab Elemen > Gaya kini mendukung @position-try aturan CSS. Tab ini me-resolve nilai position-try-options dan menautkan setiap opsi ke bagian @position-try --name khusus.

Sebelum dan sesudah mendukung aturan CSS @position-try.

Untuk mempelajari lebih lanjut, lihat Memperkenalkan API pemosisian anchor CSS.

Masalah Chromium: 40279608.

Peningkatan panel sumber

Versi ini menghadirkan beberapa peningkatan pada panel Sources.

Mengonfigurasi cantik-printing dan penutupan tanda kurung otomatis

Anda kini dapat mengaktifkan atau menonaktifkan pencetakan yang rapi dan penutupan tanda kurung otomatis untuk Editor di Sumber. Pretty-printing membuat file yang diminifikasi dapat dibaca. Penutup tanda kurung tutup otomatis menambahkan tanda kurung tutup () atau }) atau tag (>) saat Anda mengetik karakter pembuka.

Untuk mengonfigurasi perilaku yang relevan, centang atau hapus centang pada opsi Auto closing brackets dan Automatically pretty print minified sources baru di Settings > Preferences > Sources.

Sebelum dan sesudah menambahkan setelan baru untuk pencetakan yang rapi dan penutupan tanda kurung secara otomatis.

Masalah Chromium: 40865010, 324314570.

Promise yang ditolak dan ditangani akan dikenali sebagai tertangkap

Panel Sumber kini mengenali promise yang ditolak dengan benar sebagai tertangkap jika Anda menanganinya dengan .catch() atau .then() dua argumen.

Dengan kata lain, jika Sources > Breakpoints > Pause on uncaught exceptions diaktifkan, debugger tidak akan menjeda pada pernyataan yang mirip dengan berikut:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Sebelum dan sesudah mengenali penolakan yang tertangkap.

Masalah Chromium: 40283993.

Penyebab error di Konsol

Konsol sekarang menampilkan rantai penyebab error dalam stack trace, jika ada.

Untuk mempermudah proses debug, Anda dapat menentukan penyebab error saat menangkap dan menampilkan ulang error. Saat menelusuri rantai penyebab, Konsol akan mencetak setiap tumpukan error dengan awalan Caused by:, sehingga Anda masih dapat melihat error asli.

Sebelum dan setelah pencetakan stack trace dengan awalan `Caused by`.

Masalah Chromium: 40182832.

Peningkatan panel jaringan

Versi ini menghadirkan beberapa peningkatan pada panel Jaringan.

Memeriksa header Petunjuk Awal

Header Petunjuk Awal mendapatkan bagian khusus di tab Header permintaan pada panel Jaringan. Sebelumnya, Anda dapat menemukan header yang relevan di bagian Header Respons.

Petunjuk Awal adalah kode status HTTP (103 Early Hints) yang digunakan untuk mengirim respons HTTP awal sebelum respons akhir. Hal ini memungkinkan server mengirim petunjuk ke browser tentang sub-resource penting (misalnya, sheet gaya atau JavaScript penting) atau origin yang kemungkinan akan digunakan oleh halaman, saat server sibuk membuat resource utama.

Bagian sebelum dan sesudah penambahan bagian khusus untuk Petunjuk Awal.

Untuk mengetahui informasi selengkapnya, lihat Pemuatan halaman yang lebih cepat menggunakan waktu berpikir server dengan Petunjuk Awal.

Masalah Chromium: 40222701.

Menyembunyikan kolom Waterfall

Anda sekarang dapat menyembunyikan kolom Waterfall di panel Jaringan mirip dengan cara menyembunyikan kolom lain. Klik kanan nama kolom dan hapus centang pada kotak Waterfall di menu drop-down.

Sebelum dan sesudah menambahkan opsi untuk menyembunyikan kolom Waterfall.

Masalah Chromium: 40574989.

Peningkatan panel performa

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Mengambil statistik pemilih CSS

Panel Performance mendapatkan setelan baru yang memungkinkan Anda merekam statistik pemilih CSS untuk peristiwa Recalculate Style yang berjalan lama.

Untuk melihat statistik, pilih peristiwa Hitung Ulang Gaya dan buka tab Statistik Pemilih yang baru. Tab ini menampilkan informasi tentang waktu yang berlalu, upaya dan jumlah pencocokan, serta persentase ketidakcocokan jalur lambat untuk setiap pemilih.

Statistik pemilih sebelum dan sesudah ditambahkan.

Masalah Chromium: 324282954.

Ubah urutan dan sembunyikan trek

Panel Performa mendapatkan mode konfigurasi baru yang memungkinkan Anda mengubah urutan trek dan menyembunyikannya.

Untuk masuk ke mode konfigurasi, klik tombol Edit di sebelah kiri nama trek. Kemudian, klik ke atas atau ke bawah untuk memindahkan jalur atau klik untuk menyembunyikan. Klik tombol Periksa di sebelah kanan nama trek setelah selesai.

Versi berikutnya, Chrome 126, akan menghadirkan lebih banyak peningkatan pada UI ini.

Masalah Chromium: 311439339.

Mengabaikan retainer di panel Memori

Sekarang Anda dapat mengabaikan retainer dalam snapshot heap yang diambil dengan panel Memory.

Untuk mengabaikan penahan, pilih objek, lalu di bagian Retainer, klik kanan penahan, lalu pilih Ignore this retainer dari menu drop-down. Retainer yang diabaikan ditandai dengan nilai ignored di kolom Distance. Untuk berhenti mengabaikan, klik Pulihkan retainer yang diabaikan di panel tindakan di bagian atas.

Sebelum dan sesudah menambahkan opsi untuk mengabaikan retainer.

Selain itu, snapshot heap kini mendukung node dan tepi pembatasan dalam jumlah yang lebih besar (332350576).

Masalah Chromium: 327337527.

Lighthouse 11.7.1

Panel Lighthouse sekarang menjalankan Lighthouse 11.7.1. Lihat daftar lengkap perubahan.

Di antara perubahan penting tersebut adalah dukungan untuk plugin Iklan Penayang yang tidak digunakan lagi, yang menjadi usang dalam versi ini.

Sebelum dan sesudah menambahkan dukungan penghapusan plugin Iklan Penayang.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Panel Perekam kini secara resmi keluar dari status pratinjau (329271496).
  • Konsol kini tidak menampilkan error saat pemformat kustom menampilkan null untuk fungsi body(), yang merupakan perilaku yang valid (329400119).
  • Penanda sintaksis yang diperbarui panel Sources, khususnya, sekarang mendukung tanda v dan d dalam ekspresi reguler.
  • Tab Jaringan > Cookie memperbaiki bug terkait pemetaan cookie yang dikecualikan ke cookie respons (41491846).
  • Tab Elemen > Gaya sekarang melakukan hal berikut:
    • Menampilkan aturan diwariskan yang sepenuhnya kelebihan beban dengan properti kustom (41489874).
    • Menyoroti nilai yang diterapkan dalam light-dark(), bergantung pada tema warna (331123816).

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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua yang telah dibahas dalam seri Yang baru di DevTools.