Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 110)

Jecelyn Yeen

Menghapus Panel Performa saat memuat ulang

Panel Performance kini menghapus screenshot dan rekaman aktivitas saat Anda mengklik tombol Start profiling and reload page.

Sebelumnya, panel Performa menampilkan linimasa dengan screenshot dari rekaman sebelumnya. Hal ini menyulitkan untuk melihat kapan pengukuran sebenarnya dimulai. Sekarang panel akan selalu membuka halaman about:blank terlebih dahulu untuk menjamin bahwa perekaman dimulai dengan rekaman aktivitas kosong. Hal ini selaras dengan panel Performance Insights yang telah melakukan hal yang sama.

Menghapus Panel Performa saat memuat ulang.

Masalah Chromium: 1101268, 1382044

Update Perekam Suara

Lihat dan tandai kode alur pengguna Anda di Perekam Suara

Perekam kini menawarkan tampilan kode terpisah, sehingga lebih mudah untuk melihat kode alur penggunaan Anda. Untuk mengakses tampilan kode, buka alur penggunaan dan klik Show Code.

Perekam menandai kode yang sesuai saat Anda mengarahkan kursor ke setiap langkah di sebelah kiri, sehingga memudahkan pelacakan alur. Anda dapat mengubah format kode menggunakan menu dropdown, yang memungkinkan Anda beralih antar-format seperti skrip Nightwatch Test.

Tampilan kode di Perekam Suara.

Masalah Chromium: 1385489

Menyesuaikan jenis pemilih rekaman

Anda dapat membuat rekaman yang hanya merekam jenis pemilih yang penting. Dengan opsi baru untuk menyesuaikan jenis pemilih saat membuat rekaman baru, Anda dapat menyertakan atau mengecualikan pemilih seperti XPath, sehingga memastikan Anda hanya menangkap pemilih yang Anda inginkan dalam alur penggunaan.

Opsi baru untuk menyesuaikan jenis pemilih.

Masalah Chromium: 1384431

Mengedit alur pengguna saat merekam

Perekam kini memungkinkan pengeditan selama perekaman, sehingga Anda memiliki fleksibilitas untuk melakukan perubahan secara real time. Anda tidak perlu lagi mengakhiri perekaman untuk melakukan penyesuaian.

Mengedit selama perekaman alur penggunaan.

Masalah Chromium: 1381971

Cetak cantik yang diterapkan secara otomatis

Panel Sources kini secara otomatis melakukan Pretty print file sumber yang diminifikasi di tempatnya. Anda dapat mengklik tombol pretty print { } untuk mengurungkannya.

Sebelumnya, panel Sumber menampilkan konten yang diminifikasi secara default. Untuk memformat isi, Anda harus mengeklik tombol {i>cantik<i} secara manual. Selain itu, konten yang telah dicetak dengan baik tidak ditampilkan di tab yang sama, tetapi di tab ::formatted lain.

Menampilkan file yang diminifikasi sebelum dan setelah cetakan cantik yang diterapkan secara otomatis.

Masalah Chromium: 1383453, 1382752, 1382397

Sorotan sintaksis dan pratinjau inline yang lebih baik untuk Vue, SCSS, dan lainnya

Panel Sources meningkatkan sorotan sintaksis untuk beberapa format file yang banyak digunakan, sehingga Anda dapat membaca kode dengan lebih mudah dan mengenali strukturnya, termasuk Vue, JSX, Dart, LESS, SCSS, SASS, dan CSS inline.

Penyorotan sintaksis di Vue.

Selain itu, DevTools juga meningkatkan pratinjau inline untuk Vue, HTML inline, dan TSX. Arahkan kursor ke variabel untuk melihat pratinjau nilainya.

Pratinjau inline untuk Vue.

Selain itu, DevTools kini menampilkan peta sumber stylesheet di panel Sources. Misalnya, saat membuka file SCSS, Anda dapat mengakses file CSS terkait dengan mengklik link sourcemap.

Link peta sumber untuk SASS.

Masalah Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 13911061391, 061351406

Autocomplete yang ergonomis dan konsisten di Konsol

DevTools meningkatkan pengalaman pelengkapan otomatis dengan mengimplementasikan perubahan berikut:

Tab selalu digunakan untuk pelengkapan otomatis.
Perilaku Arrow right dan Enter bervariasi berdasarkan konteks.
Pengalaman pelengkapan otomatis konsisten di seluruh editor teks, di panel Konsol, Sumber, dan Elemen

Misalnya, berikut yang terjadi saat Anda mengetik cons di Konsol:

Konsol menampilkan daftar saran pelengkapan otomatis, dengan batas putus-putus halus di sekitar opsi atas yang menunjukkan bahwa navigasi belum dimulai.
Konsol mengeksekusi baris saat Anda menekan Enter. Sebelumnya, fungsi ini akan otomatis menyelesaikan baris dengan saran teratas. Untuk melengkapi otomatis, tekan Tab atau Arrow Right.
Konsol akan menandai opsi yang dipilih saat Anda menjelajahi daftar saran menggunakan pintasan Arrow up dan Arrow down.
Untuk melengkapi otomatis dengan opsi yang dipilih selama navigasi, gunakan tombol keyboard Tab, Enter, atau Arrow Right.
Saat mengedit di tengah kode, misalnya, saat kursor berada di antara n dan s, gunakan Tab untuk pelengkapan otomatis, Enter untuk mengeksekusi baris, dan Arrow Right untuk menggerakkan kursor maju.

Masalah Chromium: 1399436, 1276960

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

Masalah regresi di DevTools, saat gagal berhenti pada pernyataan debugger dalam skrip inline, telah diatasi. (1385374)
Setelan Konsol baru yang memungkinkan Anda meluaskan atau menciutkan pesan console.trace() secara default. Alihkan setelan melalui Setelan > Preferensi > Luaskan pesan console.trace() secara default. (1139616)
Panel Cuplikan di panel Sumber mendukung pelengkapan otomatis yang disempurnakan, mirip dengan Konsol. (772949)

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.