Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 109)

Jecelyn Yeen

Perekam Suara: Salin sebagai opsi untuk langkah, replay dalam halaman, menu konteks langkah

Opsi penyalinan baru di panel Perekam Suara.

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

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

Selain itu, Anda dapat mengklik kanan sebuah 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 Nightwatch Test. Dengan fitur ini, Anda dapat memperbarui skrip yang ada dengan mudah.

Sebelumnya, Anda dapat mengakses menu langkah hanya melalui tombol 3 titik. Anda sekarang 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 Performance kini menampilkan nama fungsi yang sebenarnya dan sumbernya dalam trace jika ada peta sumber.

Tampilkan sebelum dan sesudah perbandingan 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 pengelompokan.

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

Dengan perubahan terbaru, DevTools sekarang 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 Sources menggunakan: Di MacOS, Function + Command + Panah atas dan bawah Di Windows dan Linux, Control + Page up atau down

Selain itu, Anda dapat melihat 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 sekarang menerima Panah Kanan untuk pelengkapan otomatis hanya di akhir baris. Misalnya, dialog pelengkapan otomatis 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

Proses debug JavaScript yang ditingkatkan

Berikut adalah beberapa peningkatan proses debug JavaScript dalam rilis ini:

new.target adalah properti meta yang memungkinkan Anda mendeteksi apakah fungsi atau konstruktor dipanggil menggunakan operator baru. Sekarang Anda dapat mencatat new.target ke dalam log di Konsol untuk memeriksa nilainya selama proses debug. Sebelumnya, metode ini akan menampilkan error saat Anda memasukkan 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 tersebut dan mengevaluasi referensi yang lemah langsung di konsol selama proses debug. Sebelumnya, Anda harus memanggil "deref" secara eksplisit untuk menyelesaikannya.
Memperbaiki pratinjau inline untuk variabel yang dibayangi. Sebelumnya, nilai tampilan salah.
Deobfuscate nama variabel dalam fungsi Generator dan async di panel Cakupan pada panel Sumber.

Masalah Chromium: 1267690, 1246863 1371322, 1311637

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

Mendukung lebih banyak petunjuk untuk properti CSS yang tidak aktif di panel Styles - properti tinggi dan lebar inline, fleksibel, dan petak. (1373597, 1178508, 1178508,1178508)
Perbaikan penyorotan sintaksis. Kode ini tidak berfungsi dengan benar sejak upgrade editor kode terbaru di DevTools. (1290182)
Merekam peristiwa perubahan input dengan benar setelah peristiwa pemburaman di Perekam. (1378488)
Update skrip replay Puppeteer saat ekspor untuk mendapatkan pengalaman proses debug yang lebih baik di Perekam. (1351649)
Mendukung perekaman dan pemutaran ulang di Perekam 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 telah ditingkatkan dalam mengelola titik henti sementara

Panel Breakpoints saat ini menyediakan 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 Breakpoints 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 Breakpoints. Opsi ini memiliki label teks eksplisit yang membuat opsinya mudah dipahami.
Titik henti sementara dikelompokkan menurut file, diurutkan berdasarkan baris atau nomor 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 Breakpoint.

Baca perubahan lengkap dalam artikel RFC (tertutup) kami dan berikan masukan Anda di sini.

Tampilkan panel Breakpoint sebelum dan sesudah desain ulang.

Masalah Chromium: 1346231, 1324904

[Eksperimental] Cetakan cantik di tempat otomatis

Panel Sources kini secara otomatis Pre-printing file sumber yang diminifikasi. Anda dapat mengklik tombol pretty print { } untuk mengurungkannya.

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

Menampilkan file yang diminifikasi sebelum dan sesudah cetak cantik otomatis di tempat.

Masalah Chromium: 1164184

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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.