Yang baru di DevTools, Chrome 128

Insight konsol oleh Gemini akan tersedia di sebagian besar negara Eropa

Versi ini menghadirkan dukungan insight konsol oleh Gemini ke sebagian besar negara Eropa.

Jika Anda berada di salah satu negara tersebut, Anda kini dapat meminta Gemini memberikan insight langsung di Konsol, sehingga Anda dapat lebih memahami error dan peringatan.

Update panel performa

Update ini menghadirkan beberapa peningkatan pada panel Performa.

Jalur Enhanced Network

Track Jaringan di panel Performa telah ditingkatkan untuk menampilkan informasi penting di awal, misalnya, durasi yang lebih mendetail dan hierarki pemrakarsa jaringan, serta memberikan kejelasan yang lebih baik pada isyarat visual dan warna. Jadi, Anda tidak perlu lagi beralih antara panel Network dan tab Performance > Summary. Selain itu, jika Anda masih perlu beralih ke panel Network, kami telah mempermudah dan mempercepat prosesnya.

Jalur Network kini melakukan hal berikut:

• Menampilkan legenda warna untuk jenis permintaan.
• Menandai permintaan pemblokiran rendering dengan segitiga merah di sudut kanan atas.
• Menampilkan inisiator permintaan setelah dipilih dengan panah. Hal ini membantu Anda memahami hierarki pemrakarsa jaringan yang sebelumnya hanya tersedia di panel Network.
• Saat kursor diarahkan, tooltip yang diubah kini menampilkan informasi pengaturan waktu terstruktur, termasuk status pemblokiran rendering dan perubahan prioritas, jika ada.
• Tab Ringkasan kini juga menampilkan perincian waktu dalam kolom di sebelah kanan.

Selain itu, Anda kini dapat mengklik kanan permintaan di jalur atau URL-nya di tab Ringkasan dan memilih Tampilkan di panel Jaringan dari menu drop-down. DevTools akan mengarahkan Anda ke panel Network dan menandai permintaan yang Anda cari di tabel.

Menyesuaikan data performa dengan API ekstensibilitas

Versi ini menghadirkan dukungan untuk data ekstensi ke panel Performa. Anda kini dapat menambahkan jalur kustom dengan peristiwa dan deskripsi tooltip ke rekaman aktivitas performa, detail ke tab Ringkasan, dan lainnya. Fitur ini mungkin berguna bagi developer framework, library, dan aplikasi kompleks dengan instrumentasi kustom.

Lihat contoh jalur kustom di halaman demo ini. Di Performa > Setelan pengambilan, aktifkan check_box Data ekstensi. Mulai rekaman performa, klik Add new Corgi di halaman demo, lalu hentikan rekaman. Anda akan melihat jalur kustom dalam rekaman aktivitas yang berisi peristiwa dengan tooltip dan detail kustom di tab Ringkasan.

Singkatnya, untuk memperluas data performa, teruskan struktur tertentu ke parameter measureOption.detail atau markOption.detail dari panggilan API performance.measure() atau performance.mark().

Detail di jalur Waktu

Jika Anda adalah developer web yang menggunakan bagian User Timing dari Performance API untuk menambahkan entri ke jalur Timings, Anda kini dapat melihat detail arbitrer di tab Summary untuk peristiwa mark dan measure serta stempel waktunya.

Masalah Chromium: 345418915.

Menyalin semua permintaan yang tercantum di panel Jaringan

Daripada menyalin seluruh log jaringan, panel Network kini memungkinkan Anda menerapkan filter dan menyalin hanya permintaan yang tercantum.

Snapshot heap yang lebih cepat dengan tag HTML bernama dan lebih sedikit kekacauan

Cuplikan heap di panel Memory menjadi lebih cepat, kini memiliki objek yang dikelompokkan menurut tag HTML bernama, lebih cocok dengan semantik bahasa JavaScript dengan menampilkan lebih sedikit objek internal, dan selalu menyertakan nilai numerik.

Performa setelan check_box Sertakan nilai numerik dalam pengambilan data telah dipercepat, diaktifkan secara default, dan dihapus dari panel Memori.

Untuk menyertakan objek internal ke dalam snapshot secara manual, aktifkan settings Settings > Experiments > check_box Show option to expose internals in heap snapshots terlebih dahulu, lalu aktifkan check_box Expose internals (...) di panel Memory.

Masalah Chromium: 41490040, 343341610, 42203857.

Buka panel Animasi untuk merekam animasi dan mengeditnya secara @keyframes langsung

Panel Animasi kini melakukan hal berikut:

• Merekam animasi yang sudah berlangsung saat Anda membuka panel, sehingga Anda tidak perlu memuat ulang halaman untuk merekam animasi.
• Mendukung pengeditan langsung @keyframes. Dengan kata lain, memperbarui animasi yang direkam saat Anda mengedit bagian @keyframes di Elements > Styles.

Lihat cara kerja kedua fitur tersebut dalam video berikut.

Masalah Chromium: 352718055.

Lighthouse 12.1.0

Panel Lighthouse kini menjalankan Lighthouse 12.1.0.

Update ini membawa sejumlah perubahan, termasuk penghapusan metrik First Meaningful Paint (FMP) lama dan digantikan dengan Largest Contentful Paint (LCP). Lihat daftar lengkap perubahan.

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

Masalah Chromium: 772558.

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

• Menekan Tab setelah penyelesaian otomatis di kolom edit ekspresi live akan memindahkan fokus ke titik fokus berikutnya. Sebelumnya, teks akan diindentasi.
• Mengklik pengubah ukuran akan memfokuskan kursor ke pengubah ukuran tersebut, sehingga Anda dapat memindahkannya dengan tombol panah kanan dan kiri.
• Pembaca layar kini mengumumkan kolom edit Tambahkan ekspresi pengamatan di Sumber dan Hapus ekspresi pengamatan kini terlihat jelas saat melakukan navigasi dengan keyboard.

Masalah Chromium: 349939551, 343942719, 349334243, 349428374.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Performa:
  • Track Network: Menambahkan peristiwa koneksi WebSocket 331351979.
  • Panel Performa kini memperbesar aktivitas thread utama yang paling sibuk dengan benar 345599356.
  • Memperbaiki bug saat mengupload jenis file rekaman aktivitas yang salah. Sekarang, upload jenis apa pun dicegah, kecuali .json atau .gz yang benar 349864878.
• Elemen > Gaya:
  • Drop-down unit dalam nilai properti panjang kini tidak digunakan lagi 41495618.
  • Memperbaiki penyelesaian properti aktif untuk aturan @ bertingkat 346732737.
  • Bagian @position-try yang tidak aktif kini berwarna abu-abu 40246493.
• Aplikasi:
  • Cookie: Memperbaiki bug yang tidak akan memperbarui cookie saat mengklik Muat Ulang 348683488.
  • Penyimpanan lokal: Anda kini dapat mengurutkan menurut kunci secara alfabetis 341129585.

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