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, yang bertujuan untuk memberi Anda pemahaman yang lebih baik tentang error dan peringatan yang Anda alami.

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 penentuan posisi anchor CSS, tab Elements > Styles kini mendukung aturan CSS @position-try. 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 Sumber.

Mengonfigurasi pencetakan yang rapi 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. Penutupan kurung akan otomatis menambahkan kurung tutup () atau }) atau tag (>) saat Anda mengetik kurung buka.

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, saat 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 kini 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 sesudah mencetak pelacakan tumpukan 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.

Sebelum dan sesudah menambahkan 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

Sekarang Anda dapat menyembunyikan kolom Waterfall di panel Jaringan mirip dengan cara menyembunyikan kolom lainnya. Klik kanan nama kolom mana pun 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.

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 berlalu, upaya dan jumlah pencocokan, serta persentase ketidakcocokan jalur lambat untuk setiap pemilih.

Statistik pemilih sebelum dan sesudah ditambahkan.

Masalah Chromium: 324282954.

Mengubah urutan dan menyembunyikan lagu

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

Untuk memasuki 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 Jarak. 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 lebih banyak (ratusan juta) node dan tepi pembatasan (332350576).

Masalah Chromium: 327337527.

Lighthouse 11.7.1

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

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

Sebelum dan sesudah menambahkan dukungan plugin Iklan Penayang.

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

Masalah Chromium: 772558.

Sorotan lainnya

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).
  • Panel Sumber memperbarui penyorot sintaksis, khususnya, kini mendukung flag v dan d dalam ekspresi reguler.
  • Tab Jaringan > Cookie memperbaiki bug pada pemetaan cookie yang dikecualikan ke cookie respons (41491846).
  • Tab Elemen > Gaya kini melakukan hal berikut:
    • Menampilkan aturan turunan yang di-overload sepenuhnya dengan properti kustom (41489874).
    • Menyoroti nilai yang diterapkan dalam light-dark() bergantung pada tema warna (331123816).

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 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.