Yang Baru di DevTools (Chrome 101)

Jecelyn Yeen

Mengimpor dan mengekspor alur penggunaan yang direkam sebagai file JSON

Panel Perekam kini mendukung impor dan ekspor rekaman alur penggunaan sebagai file JSON. Penambahan ini memudahkan untuk membagikan alur penggunaan dan dapat berguna untuk pelaporan bug.

Misalnya, download file JSON ini. Anda dapat mengimpornya dengan tombol impor dan memutar ulang alur penggunaan.

Selain itu, Anda juga dapat mengekspor rekaman. Setelah merekam alur penggunaan, klik tombol ekspor. Ada 3 opsi ekspor:

  • Ekspor sebagai file JSON. Download rekaman sebagai file JSON.
  • Ekspor sebagai skrip @puppeteer/replay. Download rekaman sebagai skrip Puppeteer Replay.
  • Ekspor sebagai skrip Puppeteer . Download rekaman sebagai skrip Puppeteer.

Lihat dokumentasi untuk mempelajari lebih lanjut perbedaan antara opsi ini.

Opsi ekspor di panel Perekam

Masalah Chromium: 1257499

Melihat lapisan kaskade di panel Gaya

Lapisan cascade memungkinkan kontrol yang lebih eksplisit terhadap file CSS Anda untuk mencegah konflik khusus gaya. Hal ini sangat berguna untuk codebase besar, sistem desain, dan saat mengelola gaya pihak ketiga dalam aplikasi.

Dalam contoh ini, ada 3 lapisan cascade yang ditentukan: page, component, dan base. Di panel Styles, Anda dapat melihat setiap lapisan dan gayanya.

Klik nama lapisan untuk melihat urutan lapisan. Lapisan page memiliki spesifitas tertinggi, sehingga latar belakang box berwarna hijau.

Melihat lapisan kaskade di panel Gaya

Masalah Chromium: 1240596

Dukungan untuk fungsi warna hwb()

Sekarang Anda dapat melihat dan mengedit format warna HWB di DevTools.

Di panel Styles, tahan tombol Shift, lalu klik pratinjau warna apa pun untuk mengubah format warna. Format warna HWB ditambahkan.

Atau, Anda dapat mengubah format warna menjadi HWB di pemilih warna.

Fungsi warna hwb()

Meningkatkan tampilan properti pribadi

DevTools kini mengevaluasi dan menampilkan pengakses pribadi dengan benar. Sebelumnya, Anda tidak dapat memperluas class dengan pengakses pribadi di panel Konsol dan Sumber.

properti pribadi di Konsol

Masalah Chromium: 1296855, https://crbug.com/1303407

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Back-forward cache kini menampilkan ID ekstensi yang memblokir bfcache jika ada.( 1284548)
  • Memperbaiki dukungan pelengkapan otomatis untuk objek seperti array, nama class CSS, tag map.get, dan HTML. (1297101, 1297491, 1293807, 1296983)
  • Memperbaiki sorotan yang salah saat mengklik dua kali pada kata dan mengurungkan pelengkapan otomatis. (1298437, 1298667)
  • Memperbaiki pintasan keyboard komentar di panel Sumber. (1296535)
  • Mengaktifkan kembali dukungan untuk menggunakan tombol Alt (Opsi) untuk multi-pilihan di panel Sumber. (1304070)

[Eksperimental] Mode snapshot dan rentang waktu baru di panel Lighthouse

Selain mode navigasi yang ada, panel Lighthouse kini mendukung dua mode lainnya untuk mengukur alur penggunaan - rentang waktu dan snapshot.

Misalnya, Anda dapat menggunakan laporan rentang waktu untuk menganalisis interaksi pengguna. Buka halaman demo ini. Pilih mode Rentang waktu, lalu klik Mulai rentang waktu. Di halaman, klik cangkir kopi dan akhiri jangka waktu. Baca laporan untuk mengetahui Total Blocking Time dan Cumulative Layout Shift yang disebabkan oleh interaksi.

Setiap mode memiliki kasus penggunaan, manfaat, dan batasan yang unik. Lihat dokumentasi Lighthouse untuk mengetahui informasi selengkapnya.

Mode rentang waktu dan snapshot di panelhouse Lighthouse

Masalah Chromium: 772558

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.