Yang Baru di DevTools (Chrome 109)

Jecelyn Yeen

Perekam: Salin sebagai opsi untuk langkah, pemutaran ulang dalam halaman, menu konteks langkah

Opsi salin baru di panel Perekam.

Buka alur penggunaan yang ada di Perekam. Sebelumnya, saat Anda memutar ulang alur penggunaan, DevTools akan selalu memulai pemutaran ulang dengan membuka atau memuat ulang halaman.

Dengan update terbaru, Perekam menampilkan langkah navigasi secara terpisah. Anda dapat mengklik kanan dan menghapusnya untuk melakukan pemutaran ulang dalam halaman.

Selain itu, Anda dapat mengklik kanan langkah dan menyalinnya ke papan klip di panel *Perekam, bukan mengekspor seluruh alur penggunaan. Fitur ini juga berfungsi dengan ekstensi. Misalnya, coba salin langkah sebagai skrip Pengujian Nightwatch. Dengan fitur ini, Anda dapat memperbarui skrip yang ada dengan mudah.

Sebelumnya, Anda hanya dapat mengakses menu langkah melalui tombol 3 titik. Sekarang, Anda dapat mengklik kanan di mana saja pada langkah untuk mengakses menu.

Masalah Chromium: 1322313, 1351649, 1322313, 1339767

Menampilkan nama fungsi yang sebenarnya dalam rekaman performa

Panel Performa kini menampilkan nama fungsi yang sebenarnya dan sumbernya dalam rekaman aktivitas jika ada peta sumber.

Menampilkan perbandingan sebelum dan sesudah nama fungsi ditampilkan di panel Performa.

Dalam contoh ini, file sumber diminifikasi selama produksi. Misalnya, fungsi sayHi diminifikasi sebagai n, dan fungsi takeABreak diminifikasi sebagai o dalam demo ini.

Menampilkan file sebelum dan sesudah minifikasi.

Sebelumnya, saat Anda merekam aktivitas di panel Performa, aktivitas hanya menampilkan nama fungsi yang diminifikasi. Hal ini mempersulit proses debug.

Dengan perubahan terbaru, DevTools kini membaca peta sumber dan menampilkan nama fungsi dan lokasi sumber yang sebenarnya.

Masalah Chromium: 1364601, 1364601

Pintasan keyboard baru di panel Konsol & Sumber

Anda dapat beralih antar-tab di panel Sumber menggunakan: Di MacOS, Fungsi + Perintah + Panah atas dan bawah Di Windows dan Linux, Kontrol + Page up atau down

Selain itu, Anda dapat membuka saran pelengkapan otomatis dengan Ctrl + N dan Ctrl + P di MacOS, mirip dengan Emacs. Misalnya, Anda dapat mengetik window. di Console dan menggunakan pintasan ini untuk menavigasi.

Selain itu, DevTools kini menerima Panah Kanan untuk pelengkapan otomatis hanya di akhir baris. Misalnya, dialog pelengkapan otomatis akan muncul saat Anda mengedit sesuatu di tengah kode. Saat menekan tombol Panah Kanan, kemungkinan besar Anda ingin menetapkan kursor ke posisi berikutnya, bukan pelengkapan otomatis. Perubahan UX ini lebih selaras dengan alur kerja penulisan Anda.

Masalah Chromium: 1167965, 1172535, 1371585. 1369503

Peningkatan proses debug JavaScript

Berikut beberapa peningkatan proses debug JavaScript dalam rilis ini:

  • new.target adalah meta-properti yang memungkinkan Anda mendeteksi apakah fungsi atau konstruktor dipanggil menggunakan operator baru. Sekarang Anda dapat mencatat new.target di Konsol untuk memeriksa nilainya selama proses debug. Sebelumnya, operator ini akan menampilkan error saat Anda memasukkan new.target. Menampilkan perbandingan sebelum dan sesudah proses debug evaluasi new.target.
  • Objek WeakRef memungkinkan Anda menyimpan referensi lemah ke objek lain, tanpa mencegah objek tersebut dikumpulkan sampahnya. DevTools kini menampilkan pratinjau inline untuk nilai dan mengevaluasi referensi lemah langsung di konsol selama proses debug. Sebelumnya, Anda harus memanggil “deref” secara eksplisit untuk me-resolve-nya. Menampilkan perbandingan sebelum dan sesudah evaluasi WeakRef selama proses debug.
  • Memperbaiki pratinjau inline untuk variabel yang dibayangi. Sebelumnya, nilai tampilan salah. Menampilkan pratinjau inline perbandingan sebelum dan sesudah untuk variabel yang dibayangi.
  • Deobfuscate nama variabel dalam fungsi Generator dan async di panel Cakupan di panel Sumber.

Masalah Chromium: 1267690, 1246863 1371322, 1311637

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Mendukung lebih banyak petunjuk untuk properti CSS yang tidak aktif di panel Styles - tinggi dan lebar inline, properti flex dan petak. (1373597, 1178508, 1178508,1178508)
  • Memperbaiki penandaan sintaksis. Fitur ini tidak berfungsi dengan baik sejak upgrade editor kode terbaru di DevTools. (1290182)
  • Rekam peristiwa perubahan input dengan benar setelah peristiwa pemburaman di Perekam. (1378488)
  • Memperbarui skrip pemutaran ulang Puppeteer saat diekspor untuk pengalaman proses debug yang lebih baik di Perekam. (1351649)
  • Mendukung perekaman dan pemutaran ulang di Perekam Suara untuk proses debug jarak jauh. (1185727)
  • Memperbaiki penguraian nama variabel CSS khusus di var(). Sebelumnya, DevTools tidak mendukung penguraian variabel dengan karakter yang di-escape seperti var(--fo\ o). , (1378992)

[Eksperimental] UX yang ditingkatkan dalam mengelola titik henti sementara

Panel Titik Henti Sementara saat ini memberikan sedikit bantuan visual dalam mengawasi semua titik henti sementara. Selain itu, tindakan yang sering digunakan disembunyikan di balik menu konteks.

Desain ulang UX eksperimental ini menghadirkan struktur ke panel Titik henti sementara dan memungkinkan developer memiliki akses cepat ke fitur yang umum digunakan seperti mengedit dan menghapus titik henti sementara.

Berikut beberapa sorotannya:

  • Kedua opsi jeda berada di panel Titik Henti Sementara. Opsi ini memiliki label teks eksplisit yang membuat opsi tersebut dapat dipahami dengan sendirinya.
  • Titik henti sementara dikelompokkan menurut file, diurutkan menurut nomor baris atau kolom. Anda dapat menciutkan dan meluaskan jendela ini.**
  • Opsi baru untuk menghapus dan mengedit titik henti sementara saat mengarahkan kursor ke titik henti sementara atau nama file di panel Titik Henti Sementara.

Baca perubahan selengkapnya di RFC (tertutup) kami dan berikan masukan Anda di sini.

Tampilkan panel Titik Pembatas sebelum dan sesudah desain ulang.

Masalah Chromium: 1346231, 1324904

[Eksperimental] Pretty print otomatis di tempat

Panel Sumber kini otomatis melakukan pretty print file sumber yang diminifikasi. Anda dapat mengklik tombol cetak cantik { } untuk mengurungkan tindakan tersebut.

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

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

Masalah Chromium: 1164184

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.