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 menjamin bahwa rekaman 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

Pembaruan Perekam Suara

Melihat dan menandai kode alur pengguna Anda di Perekam

Perekam kini menawarkan tampilan kode terpisah, sehingga memudahkan Anda melihat kode alur pengguna. Untuk mengakses tampilan kode, buka alur pengguna dan 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 di antara format 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 Anda hanya merekam pemilih yang diinginkan dalam alur pengguna.

Opsi baru untuk menyesuaikan jenis pemilih.

Masalah Chromium: 1384431

Mengedit alur penggunaan saat merekam

Perekam Suara 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 pengguna.

Masalah Chromium: 1381971

Pretty print otomatis di tempat

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

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

Menampilkan file yang diminifikasi sebelum dan sesudah pretty print otomatis di tempat.

Masalah Chromium: 1383453, 1382752, 1382397

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

Panel Sumber meningkatkan penyorotan 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 peta sumber.

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 Console, Sources, dan Elements

Misalnya, berikut adalah yang terjadi saat Anda mengetik cons di Console:

  • Konsol menampilkan daftar saran pelengkapan otomatis, dengan batas putus-putus halus di sekitar opsi teratas yang menunjukkan bahwa navigasi belum dimulai. Batas putus-putus di sekitar opsi pelengkapan otomatis teratas.

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

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

  • Untuk melengkapi otomatis dengan opsi yang dipilih selama navigasi, gunakan tombol keyboard Tab, Enter, atau Arrow Right. Melengkapi 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 lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

  • Masalah regresi di DevTools, yang menyebabkan DevTools 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 > Perluas pesan console.trace() secara default. (1139616)
  • Panel Cuplikan di panel Sumber mendukung pelengkapan otomatis yang ditingkatkan, mirip dengan Konsol. (772949) Pelengkapan Otomatis di Cuplikan.

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