Debugging bisa membosankan dan bahkan lebih membuat frustrasi ketika Anda tidak dapat menemukan bug dengan mudah. Alat pengembang Chrome 106 (devtools) disetel untuk menyederhanakan proses debug, membuatnya lebih mudah dan cepat.
Sekarang Anda dapat dengan mudah menyortir file, mengoptimalkan pencarian, menyembunyikan skrip pihak ketiga, mengakses laporan kinerja mendalam, dan banyak lagi yang dibahas dalam artikel ini. Alat dev ini sangat penting, terutama bagi pengembang yang bekerja dengan kerangka kerja JavaScript seperti Angular, React, dan Vue.js, yang kini memiliki konsol interaktif dan disederhanakan untuk divisualisasikan dan di-debug kode mereka.
Mari kita lihat lebih dekat beberapa fitur baru ini:
Untuk memanfaatkan sepenuhnya pembaruan baru di Chrome 106, unduh Chrome Kenari, pengembang, atau Beta versi sebagai browser pengembangan default Anda. Anda akan memiliki akses ke alat Pengembang terbaru yang mengaktifkan pengujian API platform web, dan dengan cepat mengidentifikasi masalah atau bug di situs Anda untuk memastikan pengguna Anda mendapatkan pengalaman pelanggan terbaik.
1. File Dikelompokkan berdasarkan Ditulis/Diterapkan
Anda sekarang dapat menavigasi langsung ke komponen aplikasi Anda dengan mengelompokkan file di ditulis/diterapkan pada sumber panel. Pergi ke Sumber > menu 3 titik > Kelompokkan menurut Ditulis/Diterapkan. Sekarang, saat Anda membuka file, Anda hanya dapat melihat file yang diterapkan di panel.
Di versi Chrome sebelumnya, semua file kode sumber terlihat di navigasi panel, membuatnya sulit untuk menemukan satu file.
2. Pencarian File Sederhana
Anda dapat membatasi pencarian Anda di panel sumber hanya untuk file yang relevan. Di versi Chrome sebelumnya, file yang dihasilkan oleh kerangka kerja dan pihak ketiga lainnya akan ditampilkan di hasil penelusuran, sehingga sulit untuk mengidentifikasi item penelusuran.
Pembaruan ini adalah versi devtools untuk mengoptimalkan pencarian Anda di browser web dengan Lembar contekan pencarian Google. Untuk mengkonfigurasi pengaturan ini pergi ke 3-titik-menu > Sembunyikan sumber daftar abaikan.
Skrip pihak ketiga mengisi konsol Anda? Chrome 106 menambahkan ekstensi daftar abaikan di peta sumber untuk memungkinkan Anda menyembunyikan skrip yang dibuat secara otomatis oleh kerangka kerja dan pihak ketiga lainnya.
Untuk mengaktifkan fitur ini, buka Pengaturan > Abaikan daftar > Tambahkan skrip pihak ketiga yang dikenal secara otomatis ke daftar abaikan. Saat Anda membuka file lagi, konsol hanya akan menampilkan file relevan yang terkait dengan aplikasi Anda. Anda sekarang dapat melihat kode Anda tanpa gangguan.
4. Jejak Tumpukan Terperinci
Anda akan membutuhkan lebih sedikit waktu untuk mengidentifikasi kesalahan di konsol, berkat fitur baru di Chrome 106. Alat Pengembang Chrome memberi Anda tampilan mendetail tentang operasi asinkron dan akar penyebabnya. Di versi sebelumnya, hanya peristiwa yang menyebabkan operasi yang terlihat. DevTools terbaru menunjukkan seluruh rantai operasi dan akar penyebabnya.
Google telah mengonfigurasi a console.createTask() metode di Chrome 106. Metode ini memungkinkan kerangka kerja untuk melakukan pelacakan tumpukan di konsol. Men-debug JavaScript menggunakan devtools semudah itu men-debug CSS menggunakan chrome.
5. Lacak Interaksi di Panel Performa
Lacak Interaksi baru di Pertunjukan panel untuk mengidentifikasi potensi masalah respons terhadap aplikasi Anda. Di Chrome 106, semua interaksi ditampilkan di jalur Interaksi setelah operasi. Track menunjukkan sumber interaksi dan ID mereka. Pelacakan membantu mengidentifikasi sumber dan mencegatnya sesuai.
6. Wawasan Pengaturan Waktu LCP di Panel Performa
Itu Cat Konten Terbesar (LCP) rincian waktu sekarang tersedia di panel wawasan kinerja. LCP adalah metrik kinerja web penting yang melaporkan waktu render gambar atau blok teks yang dibutuhkan untuk dimuat di halaman web. 2,5 detik atau lebih rendah adalah skor kinerja yang baik.
Untuk melihat wawasan navigasikan ke panel kinerja>3-titik-menu-lebih banyak tol>wawasan kinerja. Saat Anda memutar ulang rekaman, file Detail panel akan menampilkan pengaturan waktu pemuatan.
Pembaruan Tambahan di Chrome 106
Penyempurnaan lain untuk Chrome 106 meliputi:
- Anda dapat mengekspor rekaman skrip Anda tanpa masalah dari Perekam panel. Tombol ekspor bermasalah di versi sebelumnya.
- Anda sekarang memiliki pemilih warna di Gaya panel elemen SVG.
- Anda dapat mengidentifikasi skrip yang mendistorsi tata letak Anda di Wawasan Kinerja panel.
- Anda dapat menampilkan jalur untuk font web LCP di Wawasan Kinerja panel.
Fitur ini dapat meningkatkan cara Anda menggunakan alat pengembangan browser.
Yang Anda Dapatkan Dari Chrome 106
Peningkatan terbaru untuk devtools di Chrome 106 membuat proses debug lebih cepat. Pembaruan baru membuatnya lebih mudah untuk memvisualisasikan operasi melalui konsol yang disederhanakan dan dinamis memungkinkan Anda untuk menyembunyikan file, menonaktifkan skrip, merekam, dan memiliki pandangan mendalam tentang aplikasi Anda saat debug.
Penambahan Chrome 106 akan memungkinkan Anda mengelola aplikasi dan mengoptimalkan kinerjanya. Lanjutkan dan nikmati manfaat ini dengan mengupdate ke versi terbaru Chrome 106.
