Yang Baru di DevTools (Chrome 105)

Putar ulang langkah demi langkah di Perekam Suara

Anda sekarang 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, replay akan dijeda sebelum mengeksekusi langkah. Dari sini, Anda dapat melanjutkan replay, menjalankan langkah, atau membatalkan replay.

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

Lihat Referensi fitur Perekam Suara untuk mengetahui informasi selengkapnya.

Masalah Chromium: 1257499

Mendukung peristiwa yang mengarahkan kursor ke panel Perekam Suara

Perekam kini mendukung penambahan langkah mouse ke atas (kursor) secara manual dalam rekaman.

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

Jika Anda memutar ulang alur penggunaan sekarang, alur akan gagal karena Perekam tidak otomatis menangkap peristiwa yang diarahkan ke peristiwa selama perekaman. Untuk mengatasi hal ini, tambahkan langkah secara manual dengan mengarahkan kursor ke pemilih sebelum mengklik item menu.

Masalah Chromium: 1257499

Largest Contentful Paint (LCP) di panel Insight performa

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

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

Masalah Chromium: 1326481

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

Panel Insight performa kini mendeteksi flash teks tak terlihat (FOIT) dan flash teks tanpa gaya (FOUT) sebagai kemungkinan penyebab utama pergeseran tata letak.

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

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

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 terinstal menangani link yang menggunakan protokol tertentu (misalnya magnet, web+example) untuk pengalaman yang lebih terintegrasi.

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

Misalnya, instal PWA demo ini. Di bagian Pengendali Protokol, ketik “Americano” lalu klik Uji protokol untuk membuka halaman kopi di PWA.

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 ditempatkan di lapisan atas. Konten tingkat atas 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. Elemen ini berada setelah tag </html> penutup.

Untuk melompat dari elemen penampung lapisan atas ke elemen hierarki lapisan atas, klik tombol buka di samping elemen atau tampilan latarnya di penampung lapisan atas.

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

Masalah Chromium: 1313690

Melampirkan informasi proses debug Wasm saat runtime

Kini Anda dapat melampirkan informasi proses debug DWARF untuk wasm selama runtime. Sebelumnya, panel Sources hanya mendukung penyertaan peta sumber ke JavaScript dan file Wasm.

Buka file Wasm di panel Sources. Klik kanan editor dan pilih Add DWARF debugging info... untuk melampirkan informasi proses debug sesuai permintaan.

Masalah Chromium: 1341255

Mendukung pengeditan langsung selama proses debug

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

Di Chrome 104, DevTools menghadirkan kembali fitur frame mulai ulang. Namun, Anda tidak dapat mengedit fungsi yang saat ini dijeda. Sangat umum bagi developer untuk membobol fungsi lalu mengedit fungsi tersebut saat dijeda.

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

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

Masalah Chromium: 1334484

Melihat dan mengedit @scope di aturan dalam panel Styles

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

Aturan @scope at adalah bagian dari spesifikasi CSS Cascading dan 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 Styles, lihat @scope di aturan. Klik deklarasi aturan untuk mengeditnya.

Masalah Chromium: 1337777

Peningkatan peta sumber

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

• DevTools kini me-resolve ID peta sumber dengan benar menggunakan tanda baca. 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.
• Perbaikan 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 lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

• Hapus pasangan nilai kunci penyimpanan lokal dengan benar dari tabel di Application > Local Storage ketika dihapus. (1339280)
• Pratinjau warna kini ditampilkan dengan benar saat melihat file CSS di panel Sources. Sebelumnya, posisi mereka salah tempat. (1340062)
• Tampilkan item petak dan fleksibel CSS secara konsisten di panel Tata Letak, serta tampilkan sebagai badge di panel Elements. Sebelumnya, item flex dan grid tidak ada secara acak di kedua tempat. (1340441, 1273992)
• Link Skrip Iklan Kreator baru tersedia untuk frame iklan jika DevTools menemukan skrip yang menyebabkan frame diberi label sebagai iklan. Anda dapat membuka bingkai melalui Aplikasi > Bingkai. (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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

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

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

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.