Yang Baru di DevTools (Chrome 105)

Jecelyn Yeen

Pemutaran ulang langkah demi langkah di Perekam

Sekarang Anda dapat menetapkan 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 penggunaan 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 penggunaan sepenuhnya dengan mudah.

Lihat Referensi fitur Perekam untuk informasi selengkapnya.

Pemutaran ulang langkah demi langkah di Perekam

Masalah Chromium: 1257499

Mendukung peristiwa arahkan kursor mouse di panel Perekam

Perekam Suara kini mendukung penambahan langkah mouse over (arahkan kursor) secara manual dalam rekaman.

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

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

Mendukung peristiwa mouse over 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 akar masalah Largest Contentful Paint (LCP).

Di rekaman performa, klik badge LCP di Linimasa. Di panel Details, 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 bisa ditindaklanjuti dan meningkatkan performa situs Anda dengan panel ini.

LCP di panel Insight performa

Masalah Chromium: 1326481

Mengidentifikasi flash 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 akar masalah untuk pergeseran tata letak.

Untuk melihat potensi 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

Sekarang Anda 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 atas di panel Elemen

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

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

Dalam demo ini, klik Buka dialog.

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

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

Di samping elemen hierarki lapisan atas (misalnya, elemen dialog), klik badge lapisan atas untuk beralih ke penampung lapisan atas.

Badge lapisan atas di panel Elemen

Masalah Chromium: 1313690

Melampirkan informasi proses debug Wasm saat runtime

Sekarang Anda dapat melampirkan informasi proses 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 Add DWARF debugging info… untuk melampirkan informasi proses debug sesuai permintaan.

ALT_TEXT_HERE

Masalah Chromium: 1341255

Mendukung edit langsung selama proses debug

Anda kini dapat mengedit fungsi teratas di stack tanpa memulai ulang debugger.

Di Chrome 104, DevTools menghadirkan kembali fitur restart frame. Namun, Anda tidak dapat mengedit fungsi yang saat ini dijeda. Developer biasanya berhenti di suatu 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 stack yang lebih jauh

edit langsung selama proses debug

Masalah Chromium: 1334484

Melihat dan mengedit @scope di aturan di panel Gaya

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

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

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

@scope at rules di panel Gaya

Masalah Chromium: 1337777

Peningkatan peta sumber

Berikut beberapa perbaikan pada peta sumber untuk meningkatkan pengalaman proses debug secara keseluruhan:

  • DevTools kini me-resolve 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 me-resolve nama peta sumber untuk konstruktor dengan panggilan super. ALT_TEXT_HERE
  • Memperbaiki pengindeksan URL peta sumber untuk URL kanonis duplikat. Sebelumnya, titik henti sementara tidak diaktifkan di beberapa file karena URL kanonis duplikat.

Masalah Chromium: 1335338, 1333411

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Menghapus 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, posisinya salah. (1340062)
  • Menampilkan item fleksibel dan petak CSS secara konsisten di panel Tata Letak, serta menampilkannya sebagai badge di panel Elemen. Sebelumnya, item fleksibel dan petak hilang secara acak di kedua tempat. (1340441, 1273992)
  • Link Skrip Iklan Kreator baru tersedia untuk bingkai iklan jika DevTools menemukan skrip yang menyebabkan bingkai diberi label sebagai iklan. Anda dapat membuka bingkai melalui Application > Frames. (1217041)

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

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.