Yang baru di DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Insight konsol oleh Gemini akan mulai 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 Anda berada di salah satu negara tersebut, sekarang Anda dapat meminta Gemini untuk memberikan insight langsung di Konsol, agar Anda dapat memahami error dan peringatan dengan lebih baik.

Insight dari Gemini untuk error di Konsol.

Update panel performa

Update ini menghadirkan beberapa peningkatan pada panel Performa.

Jalur Jaringan yang Disempurnakan

Jalur Jaringan di panel Performa telah ditingkatkan untuk menampilkan informasi penting di awal, misalnya, durasi yang lebih mendetail dan hierarki inisiator jaringan, serta untuk memperjelas isyarat visual dan warna. 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 render dengan segitiga merah di sudut kanan atas.
  • Menampilkan inisiator permintaan berdasarkan pilihan 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 di sebelah kanan.

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

Selain itu, kini Anda dapat mengklik kanan permintaan pada trek atau URL-nya di tab Ringkasan, lalu memilih Pengungkapan 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 Extensibility API

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

Trek 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 pelacakan Timing, sekarang Anda dapat melihat detail arbitrer di tab Ringkasan untuk peristiwa mark dan measure beserta 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 lebih cepat dengan tag HTML bernama dan lebih rapi

Snapshot heap di panel Memory menjadi jauh lebih cepat, kini objeknya 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 ke dalam snapshot secara manual, aktifkan Setelan > Eksperimen > Tampilkan opsi untuk menampilkan data internal dalam snapshot heap, lalu aktifkan Ekspos internal (...) di panel Memori.

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.

Mercusuar 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 bidang edit ekspresi langsung akan memindahkan fokus ke titik fokus berikutnya. Sebelumnya, cara ini akan mengindentasi 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 watch di Sumber dan Hapus ekspresi smartwatch kini terlihat jelas saat melakukan navigasi dengan keyboard.

Masalah Chromium: 349939551, 343942719, 349334243, 349428374.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa:
    • Jalur jaringan: Menambahkan peristiwa koneksi WebSocket 331351979.
    • Panel Performance kini memperbesar dengan benar aktivitas thread utama tersibuk 345599356.
    • Memperbaiki bug saat mengupload jenis file rekaman aktivitas yang salah. Bug tersebut kini mencegah upload jenis apa pun kecuali .json atau .gz 349864878 yang benar.
  • Elemen > Gaya:
    • Drop-down satuan dalam nilai properti panjang sekarang tidak digunakan lagi 41495618.
    • Perbaikan properti aktif tambahan 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 setelah Refresh klik 348683488.
    • Penyimpanan lokal: Anda kini dapat mengurutkan berdasarkan 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 yang mutakhir, dan membantu 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.