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: Enable DWARF support secara default. Untuk mengetahui informasi selengkapnya, lihat Men-debug WebAssembly dengan alat modern.

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

Kode sumber asli Anda, dipetakan menggunakan informasi proses debug DWARF.
Nama fungsi yang mudah dipahami dalam 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 Mandelbrot.

Masalah Chromium: 1414289.

Peningkatan perilaku langkah di aplikasi Wasm

Langkahi dalam kode asli Anda sekarang agar tidak dijeda dalam pembongkaran (file .wasm). Sebelumnya, jeda iklan akan dijeda di sana.

Namun, stepping berakhir saat berada di luar fungsi yang dimulainya, 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. Agar Anda dapat men-debug masalah terkait Isi Otomatis dengan mudah, panel Elemen kini dapat menandainya dengan garis bawah keriting berwarna merah.

Untuk mencoba fitur ini, aktifkan Setelan > Eksperimen > Menyoroti node atau atribut yang melanggar pada 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 tepat selama perekaman, dengan semua data runtime yang tersedia untuk Anda.

Untuk menambahkan pernyataan, mulai perekaman baru, berinteraksilah 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 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 menyatakan, misalnya, pernyataan bersyarat dalam JavaScript, jumlah turunan node (count), visibilitas elemen, dan lainnya. Untuk 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.

Mercusuar 10.1.1

Panel Lighthouse kini menjalankan Lighthouse 10.1.1, dengan perubahan penting yang diperkenalkan di 10.1.0. Semua audit yang menangani URL kini dikelompokkan berdasarkan 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 laman.

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()` menampilkan waktu saat kursor diarahkan di 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.

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

Masalah Chromium: 1426762.

Perintah `profile()` akan mengisi Performa > Utama

Perintah profile() dan profileEnd() di Konsol kini memulai dan menghentikan profiling CPU di thread Utama pada panel Performance.

Perintah console() membuat profil di panel Performa.

Masalah Chromium: 1429191.

Peringatan untuk interaksi pengguna yang lambat

Interaksi pengguna lebih dari 200 milidetik akan 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 dipindahkan

Panel Performance telah menghapus jalur berikut:

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

Jalur Data Web dan Tugas Panjang berisi informasi yang diduplikasi di tempat lain. Eksperimen juga bersifat non-interaktif dibandingkan dengan alternatif yang lebih lengkap dan memberikan informasi lebih mendetail saat diklik.

Sebelum dan sesudah memindahkan Data Web ke jalur Waktu.

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

Pelajari Data Web lebih lanjut.

Penghentian penggunaan JavaScript Profiler: Fase tiga

Pada Chrome 58, tim DevTools berencana untuk menghentikan penggunaan JavaScript Profiler dan meminta developer Node.js serta 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 > Experiments, lalu buka dari menu tiga titik .

Kotak centang profiler JavaScript di Setelan, lalu Eksperimen.

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 diklip (1429271).
Panel Sources:
- Penyorotan sintaksis JSON untuk peta sumber diaktifkan (1385374).
- Berhenti menampilkan pesan "Peta sumber terdeteksi" jika Anda menonaktifkan peta sumber secara manual (1423718).
Kini Konsol memungkinkan Anda mengevaluasi ekspresi JavaScript yang tidak lengkap dengan Ctrl + Enter dan menghasilkan error sintaksis (1314700).
Dialog pengeditan titik henti sementara 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.