Yang baru di DevTools, Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel performa

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Memindahkan dan menyembunyikan jalur dengan mode konfigurasi jalur yang diperbarui

Anda kini dapat memasuki mode konfigurasi jalur dengan mengklik kanan nama jalur dan memilih Konfigurasi jalur. Tombol edit yang memerlukan ruang ekstra telah dihapus.

Sebelum dan setelah mengganti tombol edit dengan opsi menu.

Mode konfigurasi jalur memungkinkan Anda mengubah urutan jalur dan menyembunyikannya. Klik naik atau turun untuk memindahkan jalur atau klik sembunyikan. Untuk keluar dari mode konfigurasi, klik Selesai mengonfigurasi jalur di bagian bawah. Konfigurasi ini tetap ada untuk rekaman aktivitas baru, tetapi tidak untuk sesi DevTools berikutnya.

Masalah Chromium: 336266699.

Mengabaikan skrip dalam flame chart

Diagram flame di jalur Main menambahkan dukungan daftar yang diabaikan. Sekarang Anda dapat mengklik kanan skrip dalam diagram dan memilih Tambahkan skrip ke daftar yang diabaikan.

Opsi menu untuk menambahkan skrip ke daftar yang diabaikan, skrip yang ditandai sebagai diabaikan, dan aturan yang sesuai di Setelan.

Diagram menciutkan skrip yang diabaikan, menandainya sebagai Dalam daftar yang diabaikan, dan menambahkannya ke Aturan pengecualian kustom di Setelan > Daftar yang diabaikan. Skrip yang diabaikan akan disimpan hingga Anda menghapusnya dari rekaman aktivitas atau dari Aturan pengecualian kustom.

Masalah Chromium: 336266714.

Menurunkan kecepatan CPU sebanyak 20 kali

Menu pembatasan CPU di Setelan perekaman pada panel Performa mendapatkan opsi pelambatan 20x baru. Jadi, kini Anda dapat mereproduksi dan menganalisis masalah performa di dunia nyata secara lebih akurat, bahkan di komputer kelas atas.

Sebelum dan sesudah menambahkan opsi '20x slowdonw' ke 'Setelan pengambilan'.

Masalah Chromium: 324978881.

Panel insight performa tidak akan digunakan lagi

Panel Insight performa eksperimental tidak akan digunakan lagi pada tahun 2024. Tim DevTools sedang berupaya mengintegrasikan fitur yang paling berguna ke panel Performance. Panel Insight performa kini menampilkan banner di bagian atas yang memberi tahu Anda tentang penghentian penggunaan yang akan datang.

Banner peringatan penghentian penggunaan di panel 'Insight performa'.

Untuk mempelajari lebih lanjut, lihat Alat performa pada tahun 2024 dan seterusnya.

Jika ada masukan tentang apa yang berhasil, apa yang tidak, dan apa yang menurut Anda dapat dilakukan dengan lebih baik, kami ingin mendengarnya dari Anda.

Tempelkan seluruh string header untuk menggantinya

Saat mengganti header, Anda kini dapat menempelkan seluruh string header (HEADER_NAME: VALUE) dan DevTools akan membagi string di : menjadi nama header dan nilainya.

Lihat cara kerjanya dalam video berikut.

Saat mengedit header, panel Network kini akan memperingatkan Anda jika Anda memasukkan karakter selain alfanumerik, tanda hubung, dan garis bawah.

Peringatan di samping nama header dengan karakter yang tidak didukung.

Selain itu, opsi menu penggantian dan tombol Edit dinonaktifkan untuk URL chrome://, yang sesuai dengan perilaku yang diinginkan.

Masalah Chromium: 330967147, 337012362, 328210785.

Menemukan penggunaan memori yang berlebihan dengan filter baru di snapshot heap

Snapshot heap di panel Memory mendapatkan filter baru yang dapat membantu Anda menemukan kasus umum penggunaan memori yang tidak efisien, seperti string duplikat, objek yang dipertahankan oleh node DOM yang terlepas, dan Konsol DevTools.

Sebelum dan sesudah menambahkan opsi filter untuk kasus umum penggunaan memori yang tidak efisien.

Masalah Chromium: 337094903.

Periksa bucket penyimpanan di Aplikasi > Penyimpanan

Anda kini dapat memeriksa bucket penyimpanan dalam hierarki khusus di bagian Application > Storage. Struktur ini, yang sebelumnya bersifat eksperimental, telah diaktifkan secara default.

Sebelum dan setelah mengaktifkan hierarki bucket penyimpanan di bagian Penyimpanan.

Masalah Chromium: 338094915.

Menonaktifkan peringatan self-XSS dengan tanda command line

Jika Anda mengotomatiskan penggunaan Chrome atau membuka DevTools dari command line untuk proses debug, Anda sering kali ingin menonaktifkan peringatan XSS mandiri yang muncul di setiap sesi DevTools baru.

Dialog peringatan self-xss di Konsol.

Sekarang Anda dapat menonaktifkan dialog ini dengan meneruskan --unsafely-disable-devtools-self-xss-warnings tanda command line ke Chrome.

Masalah Chromium: 41491762.

Lighthouse 12.0.0

Panel Lighthouse kini menjalankan Lighthouse 12.0.0.

Update ini menghadirkan sejumlah perubahan, termasuk penghapusan kategori PWA, penataan ulang kategori SEO, penghentian penggunaan Penghematan Keseluruhan, audit baru, dan perubahan audit. Lihat daftar lengkap perubahan.

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:

  • Performa:
    • Setelan perekaman lambat (Aktifkan instrumentasi paint lanjutan dan Aktifkan statistik pemilih CSS) kini otomatis dihapus di sesi DevTools berikutnya.
    • Tab Statistik Pemilih kini tidak otomatis men-scroll ke bagian bawah saat Anda memperbesar diagram batang dan data berubah (337999939).
  • Konsol: Pintasan Ctrl+` kini menutup Konsol di panel hanya jika dalam fokus (40875466, 328210785).
  • Isi otomatis: Penguraian alamat telah diperbaiki (335409093, 335409707).
  • Aksesibilitas: Pengumuman pembaca layar untuk string yang dilokalkan telah diperbaiki (324930007).

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.

Yang baru di DevTools

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