Yang Baru di DevTools (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Dukungan penelusuran kesalahan WebAssembly

DevTools mengaktifkan Setelan. Settings > Experiments > Kotak centang. 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.

Aplikasi Wasm dijeda di Debugger.

Untuk menguji pen-debugan 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

Melangkahi. 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. Setelan > Preferensi > Sumber.

Setelan baru yang ada di Preferensi, lalu Sumber.

Masalah Chromium: 1418938.

Men-debug Isi Otomatis menggunakan panel Elements dan tab Issues

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. Setelan > Eksperimen > Kotak centang. Menandai node atau atribut yang melanggar di hierarki DOM panel Elemen dan periksa halaman demo ini.

Masalah isi otomatis yang ditandai di panel Elemen dan dilaporkan oleh panel Masalah.

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 penyebab masalah.

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 statistik numerik gabungan seperti ukuran atau durasi. Pihak ketiga populer juga diberi tag dengan kategorinya sehingga lebih mudah mengidentifikasi tujuannya di halaman.

Audit dikelompokkan menurut entitas.

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.

Pop-up dengan pengaturan waktu saat kursor diarahkan ke bagian Pengaturan Waktu.

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.

Perintah console() membuat profil di 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 Performa > Ringkasan.

Peringatan INP.

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.

Sebelum dan sesudah memindahkan Metrik Web ke jalur Waktu.

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. Setelan > Eksperimen dan membukanya dari menu tiga titik Menu tiga titik..

Kotak centang profiler JavaScript di Setelan, lalu Eksperimen.

Untuk memprofilkan performa CPU, gunakan panel Performa.

Masalah Chromium: 1428026.

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

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.