Yang Baru di DevTools (Chrome 114)

Dukungan proses debug WebAssembly

DevTools mengaktifkan Setelan > Eksperimen > Proses Debug WebAssembly: Aktifkan dukungan DWARF secara default. Untuk mengetahui informasi selengkapnya, lihat Melakukan proses debug WebAssembly dengan alat modern.

Eksperimen ini memungkinkan Anda menjeda eksekusi dan men-debug kode C dan C++ di aplikasi Wasm, dengan semua informasi proses debug yang tersedia untuk Anda:

• Kode sumber asli Anda, yang dipetakan menggunakan informasi proses debug DWARF.
• Nama fungsi yang dapat dipahami di stack panggilan.
• Dukungan titik henti sementara, dan lainnya.

Untuk menguji proses debug Wasm, instal ekstensi C/C++ DevTools Support (DWARF) dan telusuri kode dalam demo Mandiant.

Masalah Chromium: 1414289.

Peningkatan perilaku melangkah di aplikasi Wasm

Melangkahi dalam kode asli Anda sekarang menghindari jeda dalam pembongkaran (file .wasm). Sebelumnya, perintah itu akan dijeda.

Namun, langkah berakhir saat mendarat di luar fungsi tempat ia memulai, misalnya, setelah kembali dari fungsi.

Perilaku ini diaktifkan secara default di Setelan > Preferensi > Sumber.

Masalah Chromium: 1418938.

Debug Isi Otomatis menggunakan panel Elemen dan tab Masalah

Isi Otomatis Chrome mengisi formulir secara otomatis dengan informasi yang tersimpan, seperti alamat atau informasi pembayaran Anda. Untuk memudahkan Anda men-debug masalah terkait Isi Otomatis, panel Elemen kini dapat menandainya dengan garis bawah keriting merah.

Untuk memeriksa fitur ini, aktifkan Setelan > Eksperimen > Menyoroti node atau atribut yang melanggar di hierarki DOM panel Elemen dan memeriksa halaman demo ini.

Arahkan kursor ke masalah yang ditandai di hierarki DOM, lalu klik Lihat masalah untuk membuka tab Masalah yang mencantumkan semua masalah yang terdeteksi dan memberikan petunjuk tentang apa yang salah.

Masalah Chromium: 1399414.

Pernyataan dalam Perekam Suara

Panel Perekam kini memungkinkan Anda menambahkan pernyataan langsung selama perekaman, dengan semua data runtime yang tersedia untuk Anda.

Untuk menambahkan pernyataan, mulai perekaman baru, lakukan interaksi dengan halaman Anda, lalu klik Tambahkan pernyataan. Perekam menyisipkan langkah dengan jenis waitForElement yang dapat Anda sesuaikan dengan cepat. Tonton videonya untuk melihat penerapan pernyataan di demo keranjang kopi.

Video ini menunjukkan cara menegaskan:

• Atribut HTML, misalnya, class elemen.
• Properti JavaScript di JSON, misalnya, .innerText.

Anda juga dapat mengonfigurasi langkah-langkah untuk ditegaskan, misalnya, pernyataan bersyarat di JavaScript, jumlah turunan node (count), visibilitas elemen, dan lainnya. Untuk mengetahui informasi selengkapnya, lihat Mengonfigurasi langkah.

Selain itu, Perekam kini mengingat format skrip pilihan Anda di tampilan kode berdampingan dan menu langkah klik kanan.

Masalah Chromium: 1423624.

Mercusuar 10.1.1

Panel Lighthouse kini menjalankan Lighthouse 10.1.1, dengan perubahan penting yang diperkenalkan di 10.1.0. Semua audit yang berhubungan dengan URL kini dikelompokkan menurut entitas dan statistik numerik gabungan seperti ukuran atau durasi. Pihak ketiga yang populer juga diberi tag dengan kategorinya sehingga lebih mudah untuk mengidentifikasi tujuannya di halaman.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Peningkatan performa

performance.mark() menunjukkan waktu saat kursor diarahkan ke Performa > Pengaturan waktu

Metode performance.mark() sekarang menampilkan waktunya saat Anda mengarahkan kursor ke tanda yang sesuai di Performa > Waktu. Pengaturan waktu di sini adalah stempel waktu yang relatif terhadap peristiwa navigasi sebelumnya.

Masalah Chromium: 1426762.

Perintah profile() mengisi Performa > Nomor Utama

Perintah profile() dan profileEnd() di Konsol kini memulai dan menghentikan pembuatan profil CPU di thread Utama pada panel Performa.

Masalah Chromium: 1429191.

Peringatan untuk interaksi pengguna yang lambat

Interaksi pengguna yang lebih lama dari 200 milidetik mendapatkan peringatan Interaction to Next Paint (INP) di Performance > Tab Ringkasan.

Selain itu, ID interaksi telah dipindahkan dari tooltip ke Ringkasan.

Masalah Chromium: 1432512, 1432509.

Jalur Data Web bergerak

Panel Performance telah menghapus jalur berikut:

• Jalur Data Web. Sebagai gantinya, lihat waktu yang relevan di pelacakan Waktu saat kursor diarahkan.
• Subtrack Long Tasks. Anda dapat menemukan tugas tersebut di jalur Utama yang diarsir warna merah dan dengan segitiga merah.

Pelacakan Data Web dan Tugas yang Panjang berisi informasi yang diduplikasi di tempat lain. Tombol-tombol ini juga bersifat non-interaktif dibandingkan dengan alternatif yang lebih lengkap, yang memberikan informasi yang lebih detail saat diklik.

Selain itu, jalur Pengalaman diganti namanya menjadi Pergeseran Tata Letak agar lebih akurat dalam mencerminkan penggunaannya.

Pelajari Data Web lebih lanjut.

Penghentian penggunaan JavaScript Profiler: Fase tiga

Mulai Chrome 58, tim DevTools berencana untuk menghentikan penggunaan JavaScript Profiler dan meminta developer Node.js dan Deno menggunakan panel Performance untuk membuat profil performa CPU JavaScript.

DevTools versi 114 memulai fase tiga dari penghentian JavaScript Profiler empat fase. Selama fase ini, panel JavaScript Profiler akan dihapus dari DevTools, tetapi Anda masih dapat mengaktifkannya untuk sementara melalui Settings > Eksperimen dan buka dari menu tiga titik .

Untuk membuat profil performa CPU, gunakan panel Performance.

Masalah Chromium: 1428026.

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

• Pemilih Warna kini mendeteksi nilai HWB yang di luar gamut saat terpotong (1429271).
• Panel Sources:
  • Mengaktifkan penyorotan sintaksis JSON untuk peta sumber (1385374).
  • Berhenti menampilkan "Peta sumber terdeteksi" pesan saat Anda menonaktifkan peta sumber secara manual (1423718).
• Konsol kini memungkinkan Anda mengevaluasi ekspresi JavaScript yang tidak lengkap dengan Ctrl + Enter dan menampilkan error sintaksis (1314700).
• Dialog pengeditan titik henti sekarang memiliki tombol tutup. Sebelumnya, Anda harus menekan Enter atau membatalkan fokus pada dialog (1412980).

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.
• Tulis 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.