Yang Baru di DevTools (Chrome 105)

Jecelyn Yeen

Pemutaran ulang langkah demi langkah di Perekam

Anda kini dapat menyetel titik henti sementara dan memutar ulang alur penggunaan langkah demi langkah di panel Perekam.

Untuk menetapkan titik henti sementara, klik titik biru di samping langkah. Putar ulang alur pengguna Anda, pemutaran ulang akan dijeda sebelum menjalankan langkah. Dari sini, Anda dapat melanjutkan pemutaran ulang, menjalankan langkah, atau membatalkan pemutaran ulang.

Dengan fitur ini, Anda dapat memvisualisasikan dan men-debug alur pengguna sepenuhnya dengan mudah.

Lihat Referensi fitur Perekam untuk mengetahui informasi selengkapnya.

Pemutaran ulang langkah demi langkah di Perekam

Masalah Chromium: 1257499

Mendukung peristiwa mouse di panel Perekam

Perekam Suara kini mendukung penambahan langkah mengarahkan kursor mouse (melayang) secara manual dalam rekaman.

Demo ini menampilkan menu pop-up saat kursor diarahkan. Coba rekam alur pengguna dan klik item menu.

Jika Anda memutar ulang alur pengguna sekarang, alur tersebut akan gagal karena Perekam tidak merekam peristiwa pengarahan kursor secara otomatis selama perekaman. Untuk mengatasinya, tambahkan langkah secara manual untuk mengarahkan kursor ke pemilih sebelum mengklik item menu.

Mendukung peristiwa mouse di Perekam

Masalah Chromium: 1257499

Largest Contentful Paint (LCP) di panel Insight performa

LCP adalah metrik penting yang berfokus pada pengguna untuk mengukur kecepatan pemuatan yang dirasakan. Sekarang Anda dapat mengetahui jalur penting dan penyebab utama Largest Contentful Paint (LCP).

Dalam rekaman performa, klik badge LCP di Timeline. Di panel Detail, Anda dapat melihat skor LCP, mempelajari cara memperbaiki resource yang memperlambat LCP, dan melihat jalur penting untuk resource LCP.

Lihat Insight Performa untuk mempelajari cara mendapatkan insight yang dapat ditindaklanjuti dan meningkatkan performa situs Anda dengan panel.

LCP di panel Insight performa

Masalah Chromium: 1326481

Mengidentifikasi kilasan teks (FOIT, FOUT) sebagai potensi penyebab utama pergeseran tata letak

Panel Insight performa kini mendeteksi flash of invisible text (FOIT) dan flash of unstyled text (FOUT) sebagai potensi penyebab utama pergeseran tata letak.

Untuk melihat kemungkinan penyebab utama pergeseran tata letak, klik screenshot di jalur Pergeseran tata letak.

Lihat Mengoptimalkan pemuatan dan rendering WebFont untuk mempelajari teknik mencegah pergeseran tata letak.

FOUT di panel Insight performa

Masalah Chromium: 1334628, 1328873

Pengendali protokol di panel Manifes

Anda kini dapat menggunakan DevTools untuk menguji pendaftaran pengendali protokol URL untuk Progressive Web App (PWA).

Pendaftaran pengendali protokol URL memungkinkan PWA yang diinstal menangani link yang menggunakan protokol tertentu (misalnya, magnet, web+example) untuk pengalaman yang lebih terintegrasi.

Buka bagian Protocol Handlers melalui panel Application > Manifest. Anda dapat melihat dan menguji semua protokol yang tersedia di sini.

Misalnya, instal PWA demo ini. Di bagian Protocol Handlers, ketik “americano”, lalu klik Test protocol untuk membuka halaman kopi di PWA.

Pengendali protokol di panel Manifes

Masalah Chromium: 1300613

Badge lapisan teratas di panel Elemen

Gunakan badge lapisan atas untuk memahami konsep lapisan atas dan memvisualisasikan cara perubahan konten lapisan atas.

Elemen <dialog> baru-baru ini menjadi stabil di seluruh browser. Saat Anda membuka dialog, dialog tersebut akan ditempatkan di lapisan atas. Konten tingkat teratas dirender di atas semua konten lainnya.

Dalam demo ini, klik Open dialog.

Untuk membantu memvisualisasikan elemen lapisan atas, DevTools menambahkan penampung lapisan atas (#top-layer) ke hierarki DOM. Cuplikan ini berada setelah tag penutup </html>.

Untuk berpindah dari elemen penampung lapisan atas ke elemen hierarki lapisan atas, klik tombol reveal di samping elemen atau latar belakangnya di penampung lapisan atas.

Di samping elemen pohon lapisan atas (misalnya, elemen dialog), klik badge top-layer untuk membuka penampung lapisan atas.

Badge lapisan teratas di panel Elemen

Masalah Chromium: 1313690

Melampirkan informasi proses debug Wasm saat runtime

Anda kini dapat melampirkan informasi debug DWARF untuk wasm selama runtime. Sebelumnya, panel Sumber hanya mendukung lampiran peta sumber ke file JavaScript dan Wasm.

Buka file Wasm di panel Sumber. Klik kanan di editor dan pilih Tambahkan info debug DWARF… untuk melampirkan informasi debug sesuai permintaan.

ALT_TEXT_HERE

Masalah Chromium: 1341255

Mendukung pengeditan langsung selama proses debug

Sekarang Anda dapat mengedit fungsi paling atas pada stack tanpa memulai ulang debugger.

Di Chrome 104, DevTools menghadirkan kembali fitur mulai ulang frame. Namun, Anda tidak dapat mengedit fungsi yang saat ini dijeda. Developer biasanya menghentikan fungsi, lalu mengedit fungsi tersebut saat dijeda.

Dengan update ini, debugger akan otomatis memulai ulang fungsi dengan batasan berikut:

  • Hanya fungsi teratas yang dapat diedit saat dijeda
  • Tidak ada panggilan rekursif pada fungsi yang sama di bawah tumpukan

edit langsung selama proses debug

Masalah Chromium: 1334484

Melihat dan mengedit @scope pada aturan di panel Styles

Anda kini dapat melihat dan mengedit aturan @CSS @scope di panel Gaya.

Aturan @scope adalah bagian dari spesifikasi CSS Cascading and Inheritance Level 6. Aturan ini memungkinkan developer mencakup aturan gaya di CSS.

Buka halaman demo ini dan periksa hyperlink dalam elemen <div class=”dark-theme”>. Di panel Gaya, lihat aturan @@scope. Klik deklarasi aturan untuk mengeditnya.

Aturan @scope di panel Styles

Masalah Chromium: 1337777

Peningkatan kualitas peta sumber

Berikut beberapa perbaikan pada peta sumber untuk meningkatkan pengalaman pen-debugan secara keseluruhan:

  • DevTools kini menyelesaikan ID peta sumber dengan tanda baca dengan benar. Beberapa minifier modern (misalnya, esbuild) menghasilkan peta sumber yang menggabungkan ID dengan tanda baca berikutnya (koma, tanda kurung, titik koma).
  • DevTools kini menyelesaikan nama peta sumber untuk konstruktor dengan panggilan super. ALT_TEXT_HERE
  • Memperbaiki pengindeksan URL peta sumber untuk URL kanonis duplikat. Sebelumnya, titik henti tidak diaktifkan di beberapa file karena URL kanonis duplikat.

Masalah Chromium: 1335338, 1333411

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

  • Hapus pasangan nilai kunci penyimpanan lokal dengan benar dari tabel di panel Application > Local Storage saat dihapus. (1339280)
  • Pratinjau warna kini ditampilkan dengan benar saat melihat file CSS di panel Sources. Sebelumnya, posisi mereka salah. (1340062)
  • Menampilkan item flex dan petak CSS secara konsisten di panel Tata Letak, serta menampilkannya sebagai badge di panel Elemen. Sebelumnya, item flex dan petak hilang secara acak di kedua tempat. (1340441, 1273992)
  • Link Creator Ad Script baru tersedia untuk frame iklan jika DevTools menemukan skrip yang menyebabkan frame diberi label sebagai iklan. Anda dapat membuka frame melalui Application > Frames. (1217041)

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.