Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru di DevTools, Chrome 125

Sofia Emelianova

Memahami error dan peringatan di Konsol secara lebih baik dengan Gemini

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

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

Penjelasan error yang dibuat AI.

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

Dukungan aturan `@position-try` di Elemen > Gaya

Untuk membantu Anda men-debug penempatan 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.

Karakter sebelum dan sesudah mendukung aturan CSS @position-try.

Untuk mempelajari lebih lanjut, lihat Menghubungkan elemen satu sama lain dengan penempatan anchor CSS.

Masalah Chromium: 40279608.

Peningkatan panel sumber

Versi ini menghadirkan beberapa peningkatan pada panel Sumber.

Mengonfigurasi pencetakan cantik dan penutupan tanda kurung otomatis

Sekarang Anda dapat mengaktifkan atau menonaktifkan proses cetak cantik dan penutupan kurungan untuk Editor di Sumber. Pretty-printing membuat file yang diminifikasi dapat dibaca. Penutupan tanda kurung secara otomatis menambahkan kurung tutup () atau }) atau tag (>) saat Anda mengetik kurung pembuka.

Untuk mengonfigurasi perilaku yang relevan, centang atau hapus check_box Tanda kurung tutup otomatis dan check_box Otomatis cetak sumber yang diminifikasi secara otomatis di check_box Setelan > Preferensi > Sumber.

Masalah Chromium: 40865010, 324314570.

Promise yang ditolak yang ditangani dianggap telah terdeteksi

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

Dengan kata lain, jika Sumber > Titik henti sementara > check_box Jeda pada pengecualian yang tidak tertangkap diaktifkan, debugger tidak akan dijeda pada pernyataan yang serupa dengan yang berikut:

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

Sebelum dan sesudah mengenali penolakan yang tertangkap.

Masalah Chromium: 40283993.

Penyebab error di Console

Konsol kini menampilkan rantai penyebab error di stack trace, jika ada.

Untuk mempermudah proses debug, Anda dapat menentukan penyebab error saat menangkap dan menampilkan kembali error. Saat Konsol menjalankan rantai penyebab, Konsol akan mencetak setiap stack error dengan awalan Caused by:, sehingga Anda masih dapat melihat error aslinya.

Sebelum dan sesudah mencetak pelacakan tumpukan dengan awalan `Caused by`.

Masalah Chromium: 40182832.

Peningkatan panel jaringan

Versi ini menghadirkan beberapa peningkatan pada panel Network.

Memeriksa header Early Hints

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 mengirimkan petunjuk ke browser tentang sub-resource penting (misalnya, style sheet atau JavaScript penting) atau origin yang mungkin akan digunakan oleh halaman, saat server sibuk menghasilkan resource utama.

Sebelum dan sesudah penambahan bagian khusus untuk Petunjuk Awal.

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

Masalah Chromium: 40222701.

Menyembunyikan kolom Waterfall

Anda kini dapat menyembunyikan kolom Waterfall di panel Jaringan dengan cara yang sama seperti menyembunyikan kolom lainnya. Klik kanan nama kolom apa pun dan hapus centang pada kotak check_box_outline_blank 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 Performance.

Mengambil statistik pemilih CSS

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

Untuk melihat statistik, pilih peristiwa Recalculate Style, lalu buka tab Selector Stats. Tab ini menampilkan informasi tentang waktu yang berlalu, upaya pencocokan dan jumlah kecocokan, serta persentase ketidakcocokan jalur lambat untuk setiap pemilih.

Sebelum dan sesudah menambahkan statistik pemilih.

Masalah Chromium: 324282954.

Ubah urutan dan sembunyikan trek

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

Untuk memasuki mode konfigurasi, klik tombol edit Edit di sebelah kiri nama trek. Lalu klik arrow_upward ke atas atau arrow_downward untuk memindahkan trek atau klik Visibility_off sembunyikan. Klik tombol done Check di sebelah kanan nama trek jika sudah selesai.

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

Masalah Chromium: 311439339.

Abaikan pengikut di panel Memori

Kini Anda dapat mengabaikan penahan di snapshot heap yang Anda rekam dengan panel Memori.

Untuk mengabaikan holder, pilih objek dan, di bagian Retainer, klik kanan penahan lalu pilih Abaikan penahan ini dari menu drop-down. Pengikut yang diabaikan ditandai dengan nilai ignored di kolom Distance. Untuk berhenti mengabaikan, klik Pulihkan penahan yang diabaikan di panel tindakan di bagian atas.

Sebelum dan sesudah menambahkan opsi untuk mengabaikan penahan.

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

Masalah Chromium: 327337527.

Mercusuar 11.7.1

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

Di antara perubahan penting adalah dukungan untuk plugin Iklan Penayang yang sudah tidak digunakan lagi dalam versi ini.

Sebelum dan sesudah menambahkan penghapusan dukungan 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 tidak lagi memiliki status pratinjau (329271496).
Konsol sekarang tidak menampilkan error saat pemformat kustom menampilkan null untuk fungsi body(), yang merupakan perilaku valid (329400119).
Panel Sources memperbarui penyorot sintaksis, secara khusus, kini mendukung flag v dan d dalam ekspresi reguler.
Tab Jaringan > Cookie memperbaiki bug terkait pemetaan cookie yang dikecualikan untuk merespons cookie (41491846).
Tab Elemen > Gaya kini melakukan hal berikut:
- Menampilkan aturan turunan yang sepenuhnya kelebihan muatan dengan properti kustom (41489874).
- Menyoroti nilai yang diterapkan dalam gelap terang(), 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, 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.