Yang baru di DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Insight konsol oleh Gemini akan ditayangkan di sebagian besar negara Eropa

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

Daftar negara Eropa yang baru didukung

Austria, Belgia, Bulgaria, Swiss, Siprus, Republik Ceko, Jerman, Denmark, Estonia, Spanyol, Finlandia, Prancis, Inggris Raya, Yunani, Kroasia, Hungaria, Irlandia, Islandia, Italia, Liechtenstein, Lituania, Luksemburg, Latvia, Malta, Belanda, Norwegia, Polandia, Portugal, Rumania, Swedia, Slovenia, Slovakia.

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

Insight dari Gemini untuk error di Konsol.

Update panel performa

Update ini menghadirkan beberapa peningkatan pada panel Performa.

Jalur Enhanced Network

Jalur Jaringan di panel Performa telah ditingkatkan untuk menampilkan informasi penting di awal, misalnya, durasi yang lebih mendetail dan hierarki inisiator jaringan, serta untuk memberikan kejelasan yang lebih besar pada isyarat dan warna visual. Jadi, Anda tidak perlu lagi beralih antara panel Jaringan dan tab Performa > Ringkasan. Selain itu, jika Anda masih perlu beralih ke panel Jaringan, kami telah mempermudah dan mempercepatnya untuk Anda.

Jalur Jaringan kini melakukan hal berikut:

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

Jalur jaringan yang ditingkatkan dengan legenda warna, tooltip, indikator pemblokiran render, dan pengaturan waktu di tab Ringkasan.

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 Jaringan dan menandai permintaan yang Anda cari di tabel.

Menu klik kanan untuk permintaan dengan opsi 'Tampilkan di panel Jaringan'.

Menyesuaikan data performa dengan API ekstensi

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 Data ekstensi. Mulai perekaman performa, klik Add new Corgi di halaman demo, lalu hentikan perekaman. Anda akan melihat jalur kustom dalam rekaman aktivitas yang berisi peristiwa dengan tooltip dan detail kustom di tab Ringkasan.

Jalur kustom di panel Performa.

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.

Peristiwa kustom di jalur Waktu dengan stempel waktu dan detail.

Masalah Chromium: 345418915.

Menyalin semua permintaan yang tercantum di panel Jaringan

Alih-alih menyalin seluruh log jaringan, panel Jaringan kini memungkinkan Anda menerapkan filter dan hanya menyalin permintaan yang tercantum.

Opsi salin hanya untuk permintaan yang tercantum.

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

Snapshot heap di panel Memory menjadi lebih cepat, sekarang 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.

Objek yang dikelompokkan berdasarkan tag HTML bernama.

Performa setelan Sertakan nilai numerik dalam rekaman telah dipercepat, diaktifkan secara default, dan dihapus dari panel Memory.

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

Masalah Chromium: 41490040, 343341610, 42203857.

Membuka panel Animasi untuk merekam animasi dan mengedit @keyframes secara live

Panel Animations kini melakukan hal berikut:

  • Merekam animasi yang sedang 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 diambil saat Anda mengedit bagian @keyframes di Elemen > Gaya.

Lihat cara kerja kedua fitur tersebut dalam video berikut.

Masalah Chromium: 352718055.

Lighthouse 12.1.0

Panel Lighthouse kini menjalankan Lighthouse 12.1.0.

Pembaruan ini menghadirkan sejumlah perubahan, termasuk penghapusan metrik First Meaningful Paint (FMP) lama yang diganti 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 pelengkapan otomatis di kolom edit ekspresi live akan memindahkan fokus ke titik fokus berikutnya. Sebelumnya, tindakan ini akan membuat indentasi teks.
  • Mengklik alat ubah ukuran akan memfokuskan alat tersebut, sehingga Anda dapat memindahkannya dengan tombol panah kanan dan kiri.
  • Pembaca layar kini mengumumkan kolom edit Tambahkan ekspresi smartwatch di Sumber dan Hapus ekspresi smartwatch kini terlihat jelas saat menavigasi dengan keyboard.

Masalah Chromium: 349939551, 343942719, 349334243, 349428374.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa:
    • Jalur Jaringan: Menambahkan peristiwa koneksi WebSocket 331351979.
    • Panel Performa kini memperbesar aktivitas thread utama tersibuk 345599356 dengan benar.
    • Memperbaiki bug terkait upload jenis file rekaman aktivitas yang salah, yang kini mencegah upload jenis apa pun kecuali .json atau .gz yang benar 349864878.
  • Elemen > Gaya:
    • Drop-down satuan dalam nilai properti panjang sekarang tidak digunakan lagi 41495618.
    • Memperbaiki resolusi properti aktif untuk aturan bertingkat 346732737.
    • Bagian @position-try yang tidak aktif kini berwarna abu-abu 40246493.
  • Aplikasi:
    • Cookie: Memperbaiki bug yang tidak akan memuat ulang cookie saat mengklik Muat ulang 348683488.
    • Penyimpanan lokal: Anda kini dapat mengurutkan menurut kunci menurut abjad 341129585.

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.