Yang Baru di DevTools (Chrome 104)

Jecelyn Yeen

Mulai ulang frame selama proses debug

Fitur Mulai ulang frame sudah kembali. Anda dapat menjalankan kembali kode sebelumnya saat dijeda di suatu tempat dalam fungsi. Sebelumnya, fitur ini tidak digunakan lagi dan dihapus di Chrome 92 karena masalah stabilitas.

Dalam contoh ini, debugger awalnya dijeda pada titik henti sementara (baris 343) di dekat akhir fungsi toggleColorScheme. Untuk memulai ulang proses debug dari awal fungsi toggleColorScheme, luaskan bagian Call stack di panel Debugger, klik kanan toggleColorScheme, lalu pilih Restart frame.

Masalah Chromium: 1303521

Opsi pemutaran ulang lambat di panel Perekam

Sekarang Anda dapat memutar ulang alur pengguna dengan kecepatan yang lebih lambat — lambat, sangat lambat, dan sangat lambat. Opsi ini memungkinkan Anda mengamati pemutaran ulang setiap langkah di layar dengan lebih baik.

Buka panel Perekam dan mulai perekaman baru. Setelah perekaman selesai, klik tombol drop-down Putar Ulang. Pilih kecepatan untuk memulai pemutaran ulang.

Masalah Chromium: 1306756

Membangun ekstensi untuk panel Perekam

Sekarang Anda dapat membuat atau menginstal ekstensi Chrome untuk mengekspor skrip pemutaran ulang dalam format pilihan Anda. Lihat dokumentasi API ekstensi Perekam untuk mempelajari cara membuatnya.

Untuk menginstal ekstensi demo, ikuti langkah-langkah ini yang diuraikan dalam dokumentasi.

Masalah Chromium: 1325751

Mengelompokkan file menurut status Ditulis / Di-deploy di panel Sumber

Aktifkan opsi Kelompokkan file menurut Dibuat / Di-deploy yang baru untuk mengatur file Anda di panel Sources. Saat mengembangkan aplikasi web dengan framework (misalnya, React, Angular), Anda mungkin kesulitan menavigasi file sumber karena file yang di-minify yang dihasilkan oleh alat build (misalnya, Webpack, Vite).

Dengan kotak centang ini, Anda dapat mengelompokkan file ke dalam 2 kategori untuk penelusuran file yang lebih cepat:

• Ditulis. Mirip dengan file sumber yang Anda lihat di IDE. DevTools membuat file ini berdasarkan peta sumber (yang disediakan oleh alat build Anda).
• Di-deploy. File sebenarnya yang dibaca browser. Biasanya, file ini diminifikasi.

Cobalah sendiri dengan demo React ini.

Masalah Chromium: 960909

Pelacakan Waktu Pengguna Baru di panel Insight performa

Visualisasikan tanda performance.measure() dalam rekaman Anda dengan jalur Waktu Pengguna baru di panel Insight performa.

Misalnya, halaman web ini menggunakan metode performance.measure() untuk menghitung waktu yang telah berlalu saat pemuatan teks.

Saat Anda mulai mengukur pemuatan halaman, jalur Waktu Pengguna akan ditampilkan dalam rekaman. Klik item pengaturan waktu untuk melihat detailnya di panel samping.

Masalah Chromium: 1322808

Menampilkan slot yang ditetapkan dari elemen

Elemen slot di panel Elements memiliki badge slot baru. Saat men-debug masalah tata letak, gunakan fitur ini untuk mengidentifikasi elemen yang memengaruhi tata letak node dengan lebih cepat.

Contoh ini berisi kartu dengan beberapa slot bernama. Periksa slot person-occupation kartu, klik badge slot di sampingnya untuk melihat slot yang ditetapkan.

Pelajari cara menggunakan elemen <template> dan <slot> untuk membuat template fleksibel yang kemudian dapat digunakan untuk mengisi shadow DOM komponen web.

Masalah Chromium: 1018906

Mensimulasikan konkurensi hardware untuk rekaman Performa

Setelan Hardware concurrency baru di panel Performance memungkinkan developer mengonfigurasi nilai yang dilaporkan oleh navigator.hardwareConcurrency.

Beberapa aplikasi menggunakan navigator.hardwareConcurrency untuk mengontrol tingkat paralelisme aplikasi mereka, misalnya, untuk mengontrol ukuran kumpulan pthread Emscripten. Dengan fitur ini, developer dapat menguji performa aplikasi mereka dengan jumlah inti yang berbeda.

Masalah Chromium: 1297439

Melihat pratinjau nilai non-warna saat melengkapi otomatis variabel CSS

Saat melengkapi otomatis variabel CSS, DevTools kini mengisi variabel non-warna dengan nilai yang bermakna sehingga Anda dapat melihat pratinjau jenis perubahan yang akan diterapkan nilai pada node.

Masalah Chromium: 1285091

Mengidentifikasi frame pemblokiran di panel Back/forward cache

Panel Cache kembali/maju di panel Aplikasi memiliki bagian frame baru untuk membantu Anda mengidentifikasi frame pemblokiran yang dapat mencegah halaman memenuhi syarat untuk bfcache.

Masalah Chromium: 1288158

Saran pelengkapan otomatis yang ditingkatkan untuk objek JavaScript

Pelengkapan otomatis untuk properti objek JavaScript kini ditampilkan berdasarkan urutan ini:

1. Properti yang dapat di-enumerasi sendiri
2. Properti yang tidak dapat di-enumerasi
3. Properti yang dapat di-enum yang diwariskan
4. Properti yang tidak dapat di-enumerasi yang diwariskan

Sebelumnya, developer merasa lebih sulit menemukan properti yang relevan karena saran hanya mengutamakan properti sendiri daripada properti yang diwariskan, dan semua properti yang diwariskan diberi prioritas yang sama.

Masalah Chromium: 1299241

Peningkatan peta sumber

Berikut beberapa perbaikan pada peta sumber untuk meningkatkan pengalaman pen-debugan secara keseluruhan:

• Titik henti sementara kini berfungsi dalam inline <script> dengan anotasi sourceURL.
• Sekarang debugger menyelesaikan variabel cakupan blok dalam tampilan Cakupan dengan peta sumber.
• Sekarang debugger menyelesaikan variabel dalam fungsi panah di tampilan Cakupan dengan peta sumber.

Masalah Chromium: 1329113, 1322115

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

• Memperbaiki setelan Penyelesaian otomatis untuk panel Sumber. Sebelumnya, pelengkapan otomatis selalu aktif meskipun setelannya dinonaktifkan. (1323286)
• Memperbarui tab Manifest di panel Application untuk mengurai format skema warna terbaru. (1318305)
• Meningkatkan saran untuk masalah pemblokiran rendering <script async> di panel Insight performa. Sebelumnya, DevTools menyarankan untuk add async attribute to the script tag meskipun skrip sudah ditandai sebagai async. (1334096)
• Panel Insight performa kini mendeteksi iframe sebagai potensi penyebab pergeseran tata letak. Anda dapat melihat detail iframe di panel Details. (1328873)
• Saat open file di Command menu, file yang dibuat (file yang dihasilkan oleh peta sumber) kini diberi peringkat lebih tinggi sehingga muncul di atas skrip yang di-deploy dengan nama serupa. (1312929)

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.

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.