Yang baru di DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Perekam mendukung ekspor ke Puppeteer untuk Firefox

Sebagai bagian dari dukungan WebDriver BiDi, panel Perekam Suara kini dapat mengekspor rekaman ke Puppeteer untuk Firefox. Dengan dukungan Puppeteer untuk Firefox, Anda kini dapat merekam alur pengguna 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 live

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

Untuk melihat pengamatan langsung pada 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, lalu, di jendela dialog, klik Oke. Arahkan kursor ke nilai metrik untuk melihat tooltip dengan informasi selengkapnya.

Pengamatan langsung tentang metrik di panel Performa.

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

Kotak Penelusuran di panel Performa kini juga berfungsi di seluruh rekaman 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.

Sebelum dan sesudah menampilkan stack trace untuk panggilan performance.mark dan performance. measure.

Untuk mengetahui informasi selengkapnya, lihat Menyesuaikan data performa dengan API ekstensibilitas.

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 saat Anda tidak menyimpan alamat apa pun di Chrome atau Anda 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 uji coba 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 Elements > Styles kini menyediakan lebih banyak pseudo-class yang dapat Anda aktifkan secara paksa. Kumpulan opsi baru berada di bagian 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 otomatis lebih banyak properti petak

Tab Elemen > Gaya kini menyediakan opsi pelengkapan otomatis saat Anda mengedit nama area petak dan 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 khususnya bagian Tampilkan nama garis.

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 beberapa perbaikan dan peningkatan penting dalam rilis ini:

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

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.