Yang Baru di DevTools (Chrome 112)

Update Perekam Suara

Dukungan ekstensi replay

Perekam memperkenalkan dukungan untuk opsi replay kustom yang dapat Anda sematkan ke DevTools dengan ekstensi.

Coba ekstensi contoh. Pilih opsi pemutaran ulang kustom baru untuk membuka UI pemutaran ulang kustom.

UI pemutaran ulang kustom.

Untuk menyesuaikan Perekam dengan kebutuhan Anda dan mengintegrasikannya dengan alat Anda, pertimbangkan untuk mengembangkan ekstensi Anda sendiri: jelajahi chrome.devtools.recorder API dan lihat contoh ekstensi lainnya.

Masalah Chromium: 1400243.

Merekam dengan pemilih pierce

Selain pemilih kustom, CSS, ARIA, teks, dan XPath, Anda kini dapat merekam menggunakan pemilih pierce. Selektor ini berperilaku seperti selektor CSS, tetapi juga dapat menembus root bayangan.

Mulai perekaman baru di halaman dengan shadow DOM dan centang Kotak centang. Pierce di Jenis pemilih untuk direkam. Rekam interaksi Anda dengan elemen di shadow DOM dan periksa langkah yang sesuai.

Menetapkan Perekam Suara untuk menggunakan pemilih tusuk; Cara kerja pemilih tusuk.

Masalah Chromium: 1411188.

Mengekspor sebagai skrip Puppeteer dengan analisis Lighthouse

Perekam Suara memperkenalkan opsi ekspor baru: Puppeteer (termasuk analisis Lighthouse). Dengan Puppeteer, Anda dapat mengotomatiskan dan mengontrol Chrome. Dengan Lighthouse, Anda dapat merekam dan meningkatkan performa situs.

Buka rekaman, klik Ekspor. Ekspor, pilih opsi baru, lalu simpan file .js.

Mengekspor Puppeteer (termasuk analisis Lighthouse).

Jalankan skrip Puppeteer untuk mendapatkan laporan Lighthouse dalam file flow.report.html.

Laporan Lighthouse dibuka di Chrome.

Mendapatkan ekstensi

Jelajahi opsi untuk menyesuaikan pengalaman perekam Anda, misalnya, dengan opsi ekspor kustom. Dapatkan ekstensi untuk Perekam dengan mengklik Ekspor. Ekspor > Dapatkan ekstensi dalam rekaman.

Opsi Dapatkan ekstensi di menu drop-down Ekspor.

Jangan ragu untuk menambahkan ekstensi Anda sendiri ke daftar Ekstensi Perekam. Kami menantikan kehadiran Anda dalam daftar tersebut.

Masalah Chromium: 1417104, 1413168.

Elemen > Pembaruan gaya

Dokumentasi CSS

Berapa kali sehari Anda mencari dokumentasi tentang properti CSS? Panel Elemen > Gaya kini menampilkan deskripsi singkat saat Anda mengarahkan kursor ke properti.

Tooltip dengan dokumentasi tentang properti CSS.

Tooltip juga memiliki link Pelajari lebih lanjut yang mengarahkan Anda ke Referensi CSS MDN pada properti ini.

Jika Anda sudah memahami CSS dengan baik, Anda mungkin merasa tooltip mengganggu. Untuk menonaktifkan semuanya, centang Kotak centang. Jangan tampilkan.

Untuk mengaktifkannya kembali, centang Setelan. Setelan > Preferensi > Elemen > Kotak centang. Tampilkan tooltip dokumentasi CSS.

Masalah Chromium: 1401107.

Dukungan bertingkat CSS

Panel Elemen > Gaya kini mengenali sintaksis Penetasan CSS dan menerapkan gaya bertingkat ke elemen yang tepat.

Masalah Chromium: 1172985.

Menandai logpoint dan titik henti sementara bersyarat di Konsol

Untuk lebih meningkatkan UX titik henti sementara yang ditingkatkan, Konsol kini menandai pesan yang dipicu oleh titik henti sementara:

Perubahan pada cara Konsol menampilkan pesan yang dipicu oleh titik henti sementara: dengan ikon dan link sumber yang sesuai.

Konsol kini memberi Anda link anchor yang tepat ke titik henti sementara dalam file sumber, bukan skrip VM<number> yang dibuat Chrome untuk menjalankan bagian JavaScript apa pun di V8.

Klik link di samping pesan titik henti sementara untuk langsung membuka editor titik henti sementara.

Link anchor di samping pesan logpoint yang membuka editor titik henti sementara.

Masalah Chromium: 1027458.

Mengabaikan skrip yang tidak relevan selama proses debug

Untuk membantu Anda berfokus pada bagian kode yang paling penting, kini Anda dapat menambahkan skrip yang tidak relevan ke Daftar Abaikan langsung dari hierarki file di panel Sumber > Halaman.

Klik kanan skrip atau folder, lalu pilih salah satu opsi terkait pengabaian. Anda mungkin melihat opsi untuk menambahkan atau menghapus skrip atau folder ke dan dari daftar. Debugger mengabaikan skrip yang ditambahkan ke daftar dan menghapusnya di stack panggilan.

Menu konteks folder dan skrip dengan opsi terkait pengabaian.

Semua skrip dan folder yang tercantum dalam daftar yang diabaikan berwarna abu-abu di hierarki file.

Skrip dan folder yang dihapus dari daftar abaikan berwarna abu-abu, Anda dapat menyembunyikannya dengan opsi eksperimental di menu drop-down Opsi lainnya.

Jika Anda memilih skrip yang diabaikan, tombol Konfigurasi akan mengarahkan Anda ke Setelan. Setelan > Daftar Abaikan. Anda juga dapat menyembunyikan sumber yang diabaikan dari hierarki file dengan Menu tiga titik. > Sembunyikan sumber yang tercantum dalam daftar abaikan Eksperimental..

Masalah Chromium: 883325.

Penghentian penggunaan Profiler JavaScript dimulai

Mulai Chrome 58, tim DevTools berencana untuk menghentikan penggunaan JavaScript Profiler dan meminta developer Node.js dan Deno menggunakan panel Performa untuk membuat profil performa CPU JavaScript.

Versi DevTools ini (112) memulai penghentian Profiler JavaScript empat fase. Panel JavaScript Profiler kini menampilkan banner peringatan yang sesuai.

Banner penghentian penggunaan di bagian atas Profiler.

Sebagai ganti Profiler, gunakan panel Performa untuk membuat profil CPU.

Pelajari lebih lanjut dan berikan masukan di RFC dan crbug.com/1354548 yang sesuai.

Masalah Chromium: 1417647.

Mengemulasikan kontras yang dikurangi

Tab Rendering menambahkan opsi baru ke daftar Emulate vision deficienciesReduced contrast. Dengan opsi ini, Anda dapat mengetahui tampilan situs Anda bagi orang-orang dengan sensitivitas kontras yang berkurang.

Opsi kontras yang dikurangi dipilih di bagian fungsi &#39;Emulate vision deficiencies&#39;.

Perhatikan bahwa opsi daftar telah diperbarui untuk memberi tahu Anda insensitifitas warna yang diwakili oleh opsi tersebut.

Dengan DevTools, Anda dapat menemukan dan memperbaiki semua masalah kontras sekaligus. Untuk informasi selengkapnya, lihat Membuat situs Anda lebih mudah dibaca.

Masalah Chromium: 1412719, 1412721.

Lighthouse 10

Panel Lighthouse kini menjalankan Lighthouse 10.0.1. Untuk mengetahui detail selengkapnya, lihat Yang baru di Lighthouse 10.0.1.

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

Lighthouse > Setelan. > Kotak centang kosong. Navigasi lama kini dinonaktifkan secara default. Opsi ini menggunakan konfigurasi Lighthouse lama dalam mode navigasi.

Menonaktifkan navigasi lama.

Lighthouse 10 kini menggunakan Moto G Power sebagai perangkat emulasi default. DevTools menambahkan perangkat ini ke Setelan. Setelan > Perangkat.

Moto G Power di daftar Perangkat.

Masalah Chromium: 772558.

Peringatan Konsol untuk menghapus pengendali pengambilan service worker tanpa operasi

Chrome 112 mengabaikan pengendali pengambilan pekerja layanan no-op (tanpa operasi) karena dapat memperlambat navigasi, tetapi tidak memiliki tujuan. Pengendali tersebut tidak lagi diperlukan agar situs Anda memenuhi syarat sebagai Progressive Web App.

Konsol kini menampilkan peringatan jika menemukan pengendali pengambilan no-op di situs Anda. Sebaiknya hapus.

Pengendali pengambilan no-op dan peringatan yang sesuai di Konsol.

Masalah Chromium: 1347319.

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

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

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.