Yang baru di DevTools, Chrome 125

Sofia Emelianova

Memahami error dan peringatan di Konsol dengan lebih baik menggunakan Gemini

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

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

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 penentuan posisi anchor CSS, tab Elements > Styles kini mendukung aturan CSS @position-try. Tab ini menyelesaikan nilai position-try-options dan menautkan setiap opsi ke bagian @position-try --name khusus.

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

Masalah Chromium: 40279608.

Peningkatan panel Sumber

Versi ini menghadirkan beberapa peningkatan pada panel Sumber.

Mengonfigurasi pencetakan rapi otomatis dan penutupan tanda kurung

Anda kini dapat mengaktifkan atau menonaktifkan pencetakan cantik otomatis dan penutupan tanda kurung untuk Editor di Sumber. Pretty-printing membuat file yang dikecilkan dapat dibaca. Penutupan kurung secara otomatis menambahkan kurung tutup () atau }) atau tag (>) saat Anda mengetik kurung buka.

Untuk mengonfigurasi perilaku yang relevan, centang atau hapus centang pada opsi check_box Tutup kurung secara otomatis dan check_box Format cantik otomatis sumber yang di-minify di settings Setelan > Preferensi > Sumber.

Masalah Chromium: 40865010, 324314570.

Promise yang ditolak dan ditangani diakui sebagai tertangkap

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

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

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

Masalah Chromium: 40283993.

Penyebab error di Konsol

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

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

Masalah Chromium: 40182832.

Peningkatan panel Jaringan

Versi ini menghadirkan beberapa peningkatan pada panel Network.

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 mengirimkan petunjuk ke browser tentang sub-resource penting (misalnya, lembar gaya atau JavaScript penting) atau origin yang kemungkinan akan digunakan oleh halaman, saat server sedang sibuk membuat resource utama.

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

Masalah Chromium: 40222701.

Menyembunyikan kolom Waterfall

Sekarang Anda dapat menyembunyikan kolom Waterfall di panel Jaringan dengan cara yang sama seperti menyembunyikan kolom lainnya. Klik kanan nama kolom, lalu hapus centang pada kotak check_box_outline_blank Waterfall di menu drop-down.

Masalah Chromium: 40574989.

Peningkatan panel performa

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Merekam statistik pemilih CSS

Panel Performa mendapatkan setelan baru untuk memungkinkan Anda merekam statistik pemilih CSS untuk peristiwa Hitung Ulang Gaya 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 telah berlalu, upaya dan jumlah kecocokan, serta persentase kecocokan jalur lambat untuk setiap pemilih.

Masalah Chromium: 324282954.

Mengubah urutan dan menyembunyikan jalur

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

Untuk memasuki mode konfigurasi, klik tombol edit Edit di sebelah kiri nama jalur. Kemudian, klik arrow_upward naik atau arrow_downward turun untuk memindahkan trek atau klik visibility_off sembunyikan. Klik tombol selesai Periksa di sebelah kanan nama trek setelah Anda 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 penahan di snapshot heap yang Anda ambil dengan panel Memory.

Untuk mengabaikan penahan, pilih objek dan, di bagian Penahan, klik kanan penahan dan pilih Abaikan penahan ini dari menu drop-down. Retainer yang diabaikan ditandai dengan nilaiignored di kolom Jarak. Untuk berhenti mengabaikan, klik Pulihkan retainer yang diabaikan di panel tindakan di bagian atas.

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

Masalah Chromium: 327337527.

Lighthouse 11.7.1

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

Salah satu perubahan penting adalah dukungan yang tidak digunakan lagi untuk plugin Publisher Ads, yang menjadi usang dalam versi ini.

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

Masalah Chromium: 772558.

Sorotan lain-lain

Berikut 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).
• Penyorot sintaksis yang diperbarui di panel Sources, khususnya, kini mendukung tanda v dan d dalam ekspresi reguler.
• Tab Network > Cookies memperbaiki bug dengan memetakan cookie yang dikecualikan ke cookie respons (41491846).
• Tab Elemen > Gaya kini melakukan hal berikut:
  • Menampilkan aturan turunan yang sepenuhnya kelebihan beban dengan properti kustom (41489874).
  • Menyoroti nilai yang diterapkan di 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 Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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