Yang Baru di DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Dukungan penelusuran bug WebAssembly

DevTools mengaktifkan Settings > Experiments > WebAssembly Debugging: Enable DWARF support secara default. Untuk mengetahui informasi selengkapnya, lihat 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 tersedia untuk Anda:

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

Untuk menguji proses debug Wasm, instal ekstensi C/C++ DevTools Support (DWARF) dan jalankan kode langkah demi langkah di demo Mandelbrot.

Masalah Chromium: 1414289.

Peningkatan perilaku penelusuran di aplikasi Wasm

Step over dalam kode asli Anda kini menghindari jeda dalam disassembly (file .wasm). Sebelumnya, pemutaran akan dijeda di sana.

Namun, penelusuran akan berakhir saat mendarat di luar fungsi tempatnya dimulai, misalnya, setelah kembali dari fungsi.

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

Masalah Chromium: 1418938.

Men-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 bergelombang merah.

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

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

Masalah Chromium: 1399414.

Pernyataan di Perekam

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

Untuk menambahkan pernyataan, mulai perekaman baru, berinteraksi dengan halaman Anda, lalu klik Tambahkan pernyataan. Perekam menyisipkan langkah dengan jenis waitForElement yang dapat Anda sesuaikan dengan cepat. Tonton video untuk melihat cara kerja pernyataan pada demo gerobak kopi.

Video ini menunjukkan cara menegaskan:

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

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

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

Masalah Chromium: 1423624.

Lighthouse 10.1.1

Panel Lighthouse kini menjalankan Lighthouse 10.1.1, dengan perubahan penting yang diperkenalkan di 10.1.0. Semua audit yang berkaitan dengan URL kini dikelompokkan menurut entitas dan mengagregasi statistik numerik seperti ukuran atau durasi. Pihak ketiga populer juga diberi tag dengan kategorinya sehingga lebih mudah 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() menampilkan pengaturan waktu saat kursor diarahkan ke Performance > Timings

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

Masalah Chromium: 1426762.

profile() mengisi Performance > Main

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

Masalah Chromium: 1429191.

Peringatan untuk interaksi pengguna yang lambat

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

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

Masalah Chromium: 1432512, 1432509.

Lagu Data Web berpindah

Panel Performa telah menghapus jalur berikut:

• Jalur Data Web. Sebagai gantinya, lihat waktu yang relevan di jalur Waktu saat mengarahkan kursor.
• Subjalur Tugas Panjang. Anda sudah dapat menemukan tugas tersebut di jalur Utama yang diarsir merah dan dengan segitiga merah.

Track Web Vitals dan Long Tasks berisi informasi yang diduplikasi di tempat lain. Chip ini juga tidak interaktif dibandingkan dengan alternatifnya yang memiliki fitur lebih lengkap dan memberikan informasi yang lebih mendetail saat diklik.

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

Pelajari Web Vitals lebih lanjut.

Penghentian penggunaan Profiler JavaScript: Fase ketiga

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 ketiga penghentian penggunaan Profiler JavaScript empat fase. Selama fase ini, panel JavaScript Profiler dihapus dari DevTools, tetapi Anda masih dapat mengaktifkannya untuk sementara melalui Setelan > Eksperimen dan membukanya dari menu tiga titik .

Untuk memprofilkan performa CPU, gunakan panel Performa.

Masalah Chromium: 1428026.

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

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

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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