Yang Baru di DevTools (Chrome 109)

Jecelyn Yeen

Perekam: Opsi salin sebagai untuk langkah-langkah, pemutaran ulang dalam halaman, menu konteks langkah

Opsi penyalinan baru di panel Perekam.

Buka alur pengguna yang ada di Perekam. Sebelumnya, saat Anda memutar ulang alur pengguna, 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 pengguna. Fitur ini juga berfungsi dengan ekstensi. Misalnya, coba salin langkah sebagai skrip Nightwatch Test. 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 sebenarnya dalam rekaman performa

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

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

Tampilkan file sebelum dan sesudah minifikasi.

Sebelumnya, saat Anda merekam aktivitas di panel Performance, aktivitas hanya menampilkan nama fungsi yang diminifikasi. Hal ini membuat proses debug menjadi lebih sulit.

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

Masalah Chromium: 1364601, 1364601

Pintasan keyboard baru di panel Konsol & Sumber

Anda dapat beralih antar-tab di panel Sources menggunakan: Di MacOS, Function + Command + Panah atas dan bawah Di Windows dan Linux, Control + Page up atau down

Selain itu, Anda dapat menavigasi 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 berpindah.

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

Masalah Chromium: 1167965, 1172535, 1371585. 1369503

Peningkatan proses debug JavaScript

Berikut beberapa peningkatan penelusuran bug JavaScript dalam rilis ini:

  • new.target adalah properti meta yang memungkinkan Anda mendeteksi apakah fungsi atau konstruktor dipanggil menggunakan operator baru. Anda kini dapat mencatat new.target di Konsol untuk memeriksa nilainya selama proses pen-debug-an. Sebelumnya, error akan ditampilkan saat Anda memasukkan new.target. Menampilkan perbandingan sebelum dan sesudah pen-debug-an evaluasi new.target.
  • Objek WeakRef memungkinkan Anda menyimpan referensi lemah ke objek lain, tanpa mencegah objek tersebut dikumpulkan sampah memori. DevTools kini menampilkan pratinjau inline untuk nilai dan mengevaluasi referensi lemah secara langsung di konsol selama proses debug. Sebelumnya, Anda harus memanggil “deref” secara eksplisit untuk menyelesaikannya. 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.
  • Hilangkan kebingungan nama variabel dalam fungsi Generator dan async di panel Cakupan di panel Sumber.

Masalah Chromium: 1267690, 1246863 1371322, 1311637

Sorotan lain-lain

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 grid. (1373597, 1178508, 1178508,1178508)
  • Memperbaiki penyorotan sintaksis. Fitur ini tidak berfungsi dengan baik sejak upgrade editor kode baru-baru ini di DevTools. (1290182)
  • Merekam peristiwa perubahan input dengan benar setelah peristiwa on blur 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 Breakpoints saat ini hanya 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 memberikan struktur pada panel Titik Break dan memungkinkan developer memiliki akses cepat ke fitur yang umum digunakan seperti mengedit dan menghapus titik henti.

Berikut beberapa sorotannya:

  • Kedua opsi jeda ada di panel Breakpoints. Opsi ini memiliki label teks eksplisit yang membuat opsi dapat dipahami dengan sendirinya.
  • Titik henti sementara dikelompokkan menurut file, diurutkan berdasarkan nomor baris atau kolom. Anda dapat menciutkan dan meluaskannya.**
  • 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 lengkapnya di RFC (ditutup) kami dan sampaikan masukan Anda di sini.

Tampilkan panel Breakpoint sebelum dan sesudah desain ulang.

Masalah Chromium: 1346231, 1324904

[Eksperimental] 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. Anda harus mengklik tombol cetak cantik secara manual untuk memformat konten. Selain itu, konten yang dicetak dengan rapi tidak ditampilkan dalam file yang sama, tetapi di tab ::formatted lain.

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

Masalah Chromium: 1164184

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.