Yang Baru di DevTools (Chrome 104)

Jecelyn Yeen

Memulai ulang frame selama proses debug

Fitur Mulai ulang frame telah 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 penggunaan dengan kecepatan yang lebih lambat — lambat, sangat lambat, dan sangat lambat. Opsi ini memungkinkan Anda mengamati setiap langkah replay 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

Mem-build ekstensi untuk panel Perekam

Sekarang Anda dapat mem-build atau menginstal ekstensi Chrome untuk mengekspor skrip replay dalam format favorit Anda. Lihat dokumentasi API ekstensi Perekam untuk mempelajari cara mem-build-nya.

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 baru untuk mengatur file di panel Sumber. Saat mengembangkan aplikasi web dengan framework (misalnya, React, Angular), Anda mungkin kesulitan untuk membuka file sumber karena file yang diminifikasi 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 (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

Jalur 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 berlalu saat teks dimuat.

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

Masalah Chromium: 1322808

Menampilkan slot yang ditetapkan untuk elemen

Elemen dengan slot di panel Elemen 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 menampilkan 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 perekaman 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 aplikasinya, misalnya, untuk mengontrol ukuran kumpulan pthread Emscripten. Dengan fitur ini, developer dapat menguji performa aplikasi mereka dengan jumlah core yang berbeda.

Masalah Chromium: 1297439

Melihat pratinjau nilai non-warna saat menyelesaikan otomatis variabel CSS

Saat menyelesaikan otomatis variabel CSS, DevTools kini mengisi variabel non-warna dengan nilai yang bermakna sehingga Anda dapat melihat pratinjau jenis perubahan yang akan dihasilkan 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 pemblokir yang mungkin 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. Memiliki properti yang dapat dihitung
2. Memiliki properti yang tidak dapat dihitung
3. Properti enumerable yang diwarisi
4. Properti non-enumerabel yang diwarisi

Sebelumnya, developer merasa lebih sulit menemukan properti yang relevan karena saran hanya mendukung properti sendiri, bukan properti yang diwarisi, dan semua properti yang diwarisi diberi prioritas yang sama.

Masalah Chromium: 1299241

Peningkatan peta sumber

Berikut beberapa perbaikan pada peta sumber untuk meningkatkan pengalaman proses debug secara keseluruhan:

• Titik henti sementara kini berfungsi di <script> inline dengan anotasi sourceURL.
• Debugger kini me-resolve variabel cakupan blok di tampilan Cakupan dengan peta sumber.
• Debugger kini me-resolve variabel dalam fungsi panah di tampilan Cakupan dengan peta sumber.

Masalah Chromium: 1329113, 1322115

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

• Memperbaiki setelan Pelengkapan otomatis untuk panel Sumber. Sebelumnya, pelengkapan otomatis selalu aktif meskipun setelan dinonaktifkan. (1323286)
• Memperbarui tab Manifes di panel Aplikasi 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 asinkron. (1334096)
• Panel Insight performa kini mendeteksi iframe sebagai potensi penyebab pergeseran tata letak. Anda dapat melihat detail iframe di panel Details. (1328873)
• Saat buka file di menu Perintah, file yang ditulis (file yang dihasilkan oleh peta sumber) kini diberi peringkat lebih tinggi sehingga muncul di atas skrip yang di-deploy dengan nama yang sama. (1312929)

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.

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

Yang baru di DevTools

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