Yang Baru di DevTools (Chrome 110)

Jecelyn Yeen

Menghapus Panel Performa saat memuat ulang

Panel Performa kini menghapus screenshot dan rekaman aktivitas saat Anda mengklik tombol Mulai pembuatan profil dan muat ulang halaman.

Sebelumnya, panel Performa menampilkan linimasa dengan screenshot dari rekaman sebelumnya. Hal ini menyulitkan untuk melihat kapan pengukuran sebenarnya dimulai. Panel kini selalu membuka halaman about:blank terlebih dahulu untuk memastikan bahwa perekaman dimulai dengan rekaman aktivitas kosong. Hal ini selaras dengan panel Insight Performa yang sudah melakukan hal yang sama.

Menghapus Panel Performa saat memuat ulang.

Masalah Chromium: 1101268, 1382044

Update Perekam Suara

Melihat dan menandai kode alur penggunaan Anda di Perekam

Perekam kini menawarkan tampilan kode terpisah, sehingga mempermudah Anda melihat kode alur penggunaan. Untuk mengakses tampilan kode, buka alur penggunaan, lalu klik Tampilkan Kode.

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

Tampilan kode di Perekam.

Masalah Chromium: 1385489

Menyesuaikan jenis pemilih rekaman

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

Opsi baru untuk menyesuaikan jenis pemilih.

Masalah Chromium: 1384431

Mengedit alur penggunaan saat merekam

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

Mengedit selama perekaman alur penggunaan.

Masalah Chromium: 1381971

Pretty print otomatis di tempat

Panel Sources kini secara otomatis mencetak file sumber yang diminifikasi dengan cantik. Anda dapat mengklik tombol pretty print { } untuk mengurungkan tindakan tersebut.

Sebelumnya, panel Sumber menampilkan konten yang diminifikasi secara default. Untuk memformat konten, Anda harus mengklik tombol cetak rapi secara manual. Selain itu, konten yang dicetak dengan baik tidak ditampilkan di tab yang sama, tetapi di tab ::formatted lain.

Menampilkan file yang diminifikasi sebelum dan sesudah pretty print langsung otomatis.

Masalah Chromium: 1383453, 1382752, 1382397

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

Panel Sumber 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 Sumber. 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, 1392106, 1149734

Pelengkapan Otomatis yang ergonomis dan konsisten di Konsol

DevTools meningkatkan pengalaman pelengkapan otomatis dengan menerapkan 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 adalah hal 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. Batas putus-putus di sekitar opsi pelengkapan otomatis atas.

  • Konsol akan mengeksekusi baris saat Anda menekan Enter. Sebelumnya, fitur ini akan otomatis melengkapi baris dengan saran teratas. Untuk menyelesaikan otomatis, tekan Tab atau Arrow Right. Menjalankan baris saat Enter ditekan.

  • Konsol menandai opsi yang dipilih saat Anda menjelajahi daftar saran menggunakan pintasan Arrow up dan Arrow down. Sorotan selama navigasi saran.

  • Untuk menyelesaikan otomatis dengan opsi yang dipilih selama navigasi, gunakan tombol keyboard Tab, Enter, atau Arrow Right. Selesaikan otomatis dengan opsi yang dipilih selama navigasi.

  • 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 memindahkan kursor ke depan. Mengedit di tengah kode.

Masalah Chromium: 1399436, 1276960

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Masalah regresi di DevTools, yang gagal berhenti pada pernyataan debugger dalam skrip inline, telah diselesaikan. (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 ditingkatkan, mirip dengan Konsol. (772949) Pelengkapan otomatis di Cuplikan.

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna menemukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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