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 sudah ada di Recorder. 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 memutar ulang dalam halaman.

Selain itu, Anda dapat mengklik kanan langkah dan menyalinnya ke papan klip di panel *Perekam, alih-alih mengekspor seluruh alur penggunaan. Fungsi 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 yang sebenarnya dalam rekaman performa

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

Menampilkan sebelum dan sesudah perbandingan nama fungsi yang 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 setelah minifikasi.

Sebelumnya, saat Anda merekam aktivitas di panel Performance, rekaman 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 yang sebenarnya dan lokasi sumber.

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 kini 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 menyetel kursor ke posisi berikutnya, bukan pelengkapan otomatis. Perubahan UX ini lebih selaras dengan alur kerja pembuatan Anda.

Masalah Chromium: 1167965, 1172535, 1371585. 1369503

Proses debug JavaScript yang lebih baik

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. Kini Anda dapat mencatat new.target ke dalam log di Konsol untuk memeriksa nilainya selama proses debug. Sebelumnya, fungsi ini akan menampilkan error saat Anda memasukkan new.target.
Objek WeakRef memungkinkan Anda menyimpan referensi lemah ke objek lain, tanpa mencegah objek tersebut dibersihkan oleh sampah memori. DevTools kini menampilkan pratinjau inline untuk nilai dan mengevaluasi referensi yang lemah secara langsung di konsol selama proses debug. Sebelumnya, Anda harus secara eksplisit memanggil “deref” pada pengguna untuk menyelesaikannya.
Pratinjau inline diperbaiki untuk variabel yang dibayangi. Sebelumnya, nilai tampilan salah.
Men-deobfuscate nama variabel di fungsi Generator dan async di panel Cakupan di panel Sumber.

Masalah Chromium: 1267690, 1246863 1371322, 1311637

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

Dukung lebih banyak petunjuk untuk properti CSS yang tidak aktif di panel Gaya - properti tinggi dan lebar inline, serta fleksi dan petak. (1373597, 1178508, 1178508,1178508)
Perbaikan penyorotan sintaksis. Ini tidak berfungsi dengan benar sejak upgrade editor kode terbaru di DevTools. (1290182)
Mencatat peristiwa perubahan input dengan benar setelah peristiwa buram di Perekam. (1378488)
Update skrip replay Puppeteer saat ekspor untuk pengalaman proses debug yang lebih baik di Recorder. (1351649)
Mendukung perekaman dan pemutaran ulang di Perekam untuk proses debug jarak jauh. (1185727)
Perbaikan 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 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 biasa digunakan seperti mengedit dan menghapus titik henti sementara.

Berikut beberapa sorotannya:

Kedua opsi jeda berada di panel Titik henti sementara. Mereka memiliki label teks eksplisit yang membuat opsinya mudah dipahami.
Titik henti sementara dikelompokkan menurut file, diurutkan menurut 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 (tertutup) kami dan berikan masukan Anda di sini.

Tampilkan panel Breakpoint sebelum dan sesudah desain ulang.

Masalah Chromium: 1346231, 1324904

[Eksperimental] Cetak cantik yang diterapkan secara otomatis

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

Sebelumnya, panel Sumber menampilkan konten yang diminifikasi secara default. Anda harus mengeklik tombol {i>cantik print<i} secara manual untuk memformat konten. Selain itu, konten yang sudah dicetak dengan baik tidak ditampilkan dalam file yang sama, tetapi di tab ::formatted lainnya.

Menampilkan file yang diminifikasi sebelum dan setelah cetakan cantik yang diterapkan secara otomatis.

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

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.