Yang Baru di DevTools (Chrome 101)

Jecelyn Yeen

Mengimpor dan mengekspor alur pengguna yang direkam sebagai file JSON

Panel Perekam kini mendukung pengimporan dan pengeksporan rekaman alur penggunaan sebagai file JSON. Penambahan ini mempermudah pembagian alur pengguna dan dapat berguna untuk pelaporan bug.

Misalnya, download file JSON ini. Anda dapat mengimpornya dengan tombol impor dan mengulangi 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 dalam bentuk 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 Suara

Masalah Chromium: 1257499

Melihat lapisan bertingkat di panel Styles

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

Dalam contoh ini, ada 3 lapisan bertingkat 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 kekhususan tertinggi, sehingga latar belakang box berwarna hijau.

Melihat lapisan bertingkat di panel Styles

Masalah Chromium: 1240596

Dukungan untuk fungsi warna hwb()

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

Di panel Styles, tahan tombol Shift, lalu klik pratinjau warna 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 Konsol dan panel Sumber.

properti pribadi di Konsol

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

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

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

[Eksperimental] Rentang waktu dan mode snapshot baru di panel Lighthouse

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

Misalnya, Anda dapat menggunakan laporan timespan untuk menganalisis interaksi pengguna. Buka halaman demo ini. Pilih mode Timespan dan klik Start timespan. Di halaman, klik kopi dan akhiri rentang waktu. Baca laporan untuk mengetahui Total Waktu Pemblokiran dan Pergeseran Tata Letak Kumulatif yang disebabkan oleh interaksi.

Setiap mode memiliki kasus penggunaan, manfaat, dan batasannya masing-masing. Lihat dokumentasi Lighthouse untuk informasi selengkapnya.

Rentang waktu dan mode snapshot di panelhouse Lighthouse

Masalah Chromium: 772558

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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59