Yang baru di DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Perekam Suara mendukung ekspor ke Puppeteer untuk Firefox

Sebagai bagian dari dukungan WebDriver BiDi, panel Perekam kini dapat mengekspor rekaman ke Puppeteer untuk Firefox. Dengan dukungan Puppeteer untuk Firefox, Anda kini dapat merekam alur penggunaan menggunakan panel Perekam Chrome DevTools, mengekspornya, dan menjalankannya di Firefox dan Chrome.

Sebelum dan sesudah menambahkan opsi 'Puppeteer for Firefox' ke menu ekspor Perekam.

Untuk mengetahui informasi selengkapnya, lihat WebDriver BiDi - Masa depan otomatisasi lintas browser.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Pengamatan metrik langsung

Panel Performa kini menampilkan pengamatan langsung tentang Data Web Inti, baik di perangkat lokal Anda maupun berdasarkan data lapangan dari Laporan UX Chrome. Hal ini memungkinkan Anda menemukan masalah performa tanpa harus merekam rekaman aktivitas performa dan memahami seberapa representatif pengalaman Anda dibandingkan dengan pengalaman pengguna.

Untuk melihat pengamatan langsung terkait LCP dan CLS, buka panel Performa. Untuk melihat INP, lakukan interaksi di halaman. Untuk membandingkan metrik lokal Anda dengan pengalaman pengguna gabungan dari Chrome UX Report, tambahkan data kolom: di bagian Data kolom di sebelah kanan, klik Siapkan, dan, di jendela dialog, klik Oke. Arahkan kursor ke nilai metrik untuk melihat tooltip yang berisi informasi selengkapnya.

Pengamatan langsung tentang metrik di panel Performa.

Panel Performa menyoroti metrik yang dapat ditingkatkan kualitasnya dan memberikan insight serta saran tentang cara mencocokkan pengalaman lokal Anda dengan pengalaman pengguna. Misalnya, Anda mungkin ingin membatasi CPU atau jaringan, yang dapat dilakukan di layar yang sama di bagian Setelan perekaman di sebelah kanan.

Kotak Penelusuran di panel Performa kini juga berfungsi di seluruh jalur Jaringan, sehingga Anda dapat menemukan permintaan dengan pintasan Ctrl / Cmd + F.

Permintaan jaringan yang ditemukan dengan penelusuran.

Melihat stack trace panggilan performance.mark dan performance.measure

Di tab Summary, panel Performance kini menampilkan stack trace panggilan performance.mark dan performance.measure. Anda dapat menggunakan panggilan ini untuk memperluas rekaman aktivitas performa dengan data kustom Anda.

Bagian sebelum dan sesudah menampilkan stack trace untuk performance.mark dan performa. Ukur panggilan.

Untuk informasi selengkapnya, lihat Menyesuaikan data performa dengan API ekstensi.

Menggunakan data alamat pengujian di panel Isi Otomatis

Panel Isi Otomatis kini menyediakan data pengujian untuk formulir alamat. Hal ini memudahkan pengujian formulir alamat di situs Anda jika Anda tidak memiliki alamat yang disimpan di Chrome atau menggunakan profil Tamu.

Untuk mengisi otomatis formulir alamat dengan data pengujian, buka panel Isi otomatis, aktifkan Tampilkan alamat pengujian di menu isi otomatis, klik kanan formulir alamat yang diisi di halaman Anda, lalu pilih salah satu opsi dari menu Alat developer.

Sebelum dan sesudah menambahkan opsi data pengujian Isi otomatis ke menu drop-down kolom formulir alamat.

Peningkatan panel elemen

Versi ini menghadirkan beberapa peningkatan pada panel Elemen.

Memaksa lebih banyak status untuk elemen tertentu

Bagian :hov di Elemen > Gaya kini memberi Anda lebih banyak class semu yang dapat diaktifkan secara paksa. Kumpulan opsi baru berada di drop-down status Paksa elemen tertentu dan khusus untuk elemen tertentu yang Anda pilih. Misalnya, <label> dan <input> memiliki kumpulan opsi yang berbeda.

Sebelum dan sesudah menambahkan kemampuan untuk memaksa status elemen tertentu.

Masalah Chromium: 40280012.

Elemen > Gaya kini melengkapi lebih banyak properti petak secara otomatis

Tab Elemen > Gaya kini menyediakan opsi pelengkapan otomatis saat Anda mengedit area petak dan nama garis.

Sebelum dan sesudah menambahkan opsi pelengkapan otomatis saat Anda mengedit nama garis petak.

Untuk mengetahui informasi selengkapnya, lihat Memeriksa tata letak petak CSS dan bagian Menampilkan nama baris secara khusus.

Lighthouse 12.2.0

Panel Lighthouse kini menjalankan Lighthouse 12.2.0.

Update ini menghadirkan sejumlah perbaikan bug. 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 adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Elemen:
    • Memperbaiki bug terkait rendering yang salah untuk properti dengan panjang berlebih 357020613.
    • Mengganti nama position-try-options menjadi position-try-fallbacks sesuai spesifikasi.
    • Muat ulang halaman kini akan memulihkan node yang dipilih bahkan di dalam iframe 40719145.
    • Aksesibilitas: Pembaca layar kini akan mengucapkan tombol Show element 357382536.
  • Performa > Jaringan: Opsi menu Pengungkapan di Jaringan kini membuka tab Header pada permintaan jaringan yang relevan.
  • Konsol:
    • Error dari ekstensi C/C++ kini tidak membuka Konsol secara paksa 356320158.
    • Memperbaiki bug pada import.meta di modul JS yang tidak dievaluasi saat dijeda 40743793.
  • Memori: Memperbaiki bug pada Pulihkan retainer yang diabaikan yang tidak muncul setelah mengabaikan retainer 327337527.

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.