Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 114)

Sofia Emelianova

Jecelyn Yeen

Dukungan proses debug WebAssembly

DevTools mengaktifkan Settings > Experiments > WebAssembly Debugging: 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.

Aplikasi Wasm dijeda di Debugger.

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.

Setelan baru ditemukan di Preferensi, lalu 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 melihat fitur ini, aktifkan Setelan > Eksperimen > Sorot node atau atribut yang melanggar di hierarki DOM panel Elemen dan periksa halaman demo ini.

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

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.

Audit yang dikelompokkan berdasarkan entitas.

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

Jendela pop-up dengan waktu saat kursor diarahkan ke bagian Waktu.

Masalah Chromium: 1426762.

Perintah `profile()` mengisi Performa > Utama

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

Perintah console() membuat profil di panel Performance.

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 tab Performance > Summary.

Peringatan INP.

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. Pilihan tersebut juga bersifat non-interaktif dibandingkan dengan alternatif yang lebih lengkap, yang memberikan informasi yang lebih detail saat diklik.

Sebelum dan sesudah memindahkan Data Web ke jalur Waktu.

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 tahap ini, panel JavaScript Profiler akan dihapus dari DevTools, tetapi Anda masih dapat mengaktifkannya untuk sementara melalui Settings > Experiments lalu membukanya dari menu tiga titik .

Kotak centang profiler JavaScript di Settings, lalu Experiment.

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 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 menampilkan error sintaksis (1314700).
Dialog pengeditan titik henti sekarang memiliki tombol tutup. Sebelumnya, Anda harus menekan Enter atau membatalkan fokus 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.