Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru di DevTools, Chrome 125

Sofia Emelianova

Pahami 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 yang dibuat AI terkait error atau peringatan, klik tombol Understanding this error (warning) di sebelah pesan di Console dan ikuti petunjuknya.

Penjelasan error yang dibuat AI.

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

`@position-try` dukungan aturan 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 CSS anchor positioning API.

Masalah Chromium: 40279608.

Peningkatan panel sumber

Versi ini menghadirkan beberapa peningkatan pada panel Sources.

Mengonfigurasi cantik-printing dan penutupan tanda kurung otomatis

Sekarang Anda dapat mengaktifkan atau menonaktifkan pencetakan rapi otomatis dan penutupan tanda kurung 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 check_box Kurung tutup otomatis dan check_box opsi Secara otomatis menampilkan sumber yang diminifikasi di check_box Setelan > Preferensi > Sumber.

Sebelum dan sesudah menambahkan pengaturan baru untuk pencetakan cantik otomatis dan penutupan tanda kurung.

Masalah Chromium: 40865010, 324314570.

Janji yang ditolak yang ditangani akan diakui sebagai terdeteksi

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

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

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

Sebelum dan sesudah mengenali penolakan yang diketahui.

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 kembali error. Saat menjalankan rantai penyebab, Console akan mencetak setiap stack error dengan awalan Caused by:, sehingga Anda masih dapat melihat error aslinya.

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 Early Hints mendapatkan bagian khusus di tab Header permintaan pada panel Jaringan. Sebelumnya, Anda dapat menemukan header yang relevan di bagian Header Respons.

Early Hints adalah kode status HTTP (103 Early Hints) yang digunakan untuk mengirim respons HTTP awal sebelum respons akhir. Hal ini memungkinkan server untuk mengirimkan 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 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 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 baru. Tab ini menunjukkan informasi tentang waktu berlalu, upaya dan jumlah pencocokan, 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 trek dan menyembunyikannya.

Untuk masuk ke mode konfigurasi, klik tombol edit Edit di sebelah kiri nama trek. Kemudian klik arrow_upward ke atas atau arrow_upward ke bawah untuk memindahkan trek atau klik arrow_upward sembunyikan. Klik tombol selesai Periksa di sebelah kanan nama trek jika sudah selesai.

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

Masalah Chromium: 311439339.

Abaikan retainer di panel Memori

Kini Anda dapat mengabaikan retainer dalam snapshot heap yang Anda ambil dengan panel Memory.

Untuk mengabaikan retainer, pilih objek, lalu di bagian Retainer, klik kanan retainer, lalu pilih Abaikan retainer ini 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.

Mercusuar 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 tidak lagi memiliki status pratinjau (329271496).
Konsol sekarang 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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.