Google Membuat Debugging Lebih Mudah Dengan Fitur Baru di Devtools Chrome 106

Debugging bisa membosankan dan bahkan lebih membuat frustrasi ketika Anda tidak dapat menemukan bug dengan mudah. Alat pengembang (devtools) Chrome 106 disetel untuk menyederhanakan proses debug, membuatnya lebih mudah dan cepat.


Anda sekarang dapat dengan mudah menyortir file, mengoptimalkan pencarian Anda, menyembunyikan skrip pihak ketiga, mengakses laporan kinerja mendalam, dan banyak lagi yang dibahas dalam artikel ini. Devtools ini sangat penting, terutama untuk pengembang yang bekerja dengan kerangka kerja JavaScript seperti Angular, React, dan Vue.js, yang sekarang memiliki konsol interaktif dan disederhanakan untuk memvisualisasikan dan men-debug kode mereka.

Mari kita lihat lebih dekat beberapa fitur baru ini:

Untuk memanfaatkan sepenuhnya pembaruan baru di Chrome 106, unduh Chrome Kenari, Dev, atau Beta versi sebagai browser pengembangan default Anda. Anda akan memiliki akses ke alat Pengembang terbaru yang memungkinkan 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 Authored/Deployed

Anda sekarang dapat menavigasi langsung ke komponen aplikasi Anda dengan mengelompokkan file di ditulis/dikerahkan di sumber panel. Pergi ke Sumber > Menu 3-titik > Kelompokkan menurut Penulisan/Diterapkan. Sekarang, ketika Anda membuka file, Anda hanya dapat melihat file yang Anda gunakan di panel.

Di versi Chrome sebelumnya, semua file kode sumber terlihat di navigasi panel, sehingga sulit untuk menemukan satu file.

See also  Cara Memfilter Hasil Pencarian Saat Mengetik Dengan React

Anda dapat membatasi pencarian Anda di panel sumber hanya untuk file yang relevan. Di Chrome versi 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 mengonfigurasi pengaturan ini, buka 3-titik-menu > Sembunyikan sumber daftar abaikan.

3. Sembunyikan Skrip Pihak Ketiga

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 > Secara otomatis menambahkan skrip pihak ketiga yang dikenal 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 pada 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 mengarah ke operasi yang terlihat. DevTools terbaru menunjukkan seluruh rantai operasi dan akar penyebabnya.

Google telah mengonfigurasi console.createTask() metode di Chrome 106. Metode ini memungkinkan kerangka kerja untuk melakukan pelacakan tumpukan di konsol. Men-debug JavaScript menggunakan devtools semudah 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 trek Interaksi setelah operasi. Trek menunjukkan sumber interaksi dan ID mereka. Pelacakan membantu mengidentifikasi sumber dan mencegatnya.

See also  Bagikan Video dengan Mudah Dengan Pengunduh TikTok Ini

6. Wawasan Waktu LCP di Panel Kinerja

Itu Cat Contentful Terbesar (LCP) detail waktu sekarang tersedia di panel wawasan kinerja. LCP adalah metrik kinerja web penting yang melaporkan waktu render gambar atau blok teks yang diperlukan untuk dimuat di halaman web. Sebuah 2.5sec atau di bawah 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, rincian panel akan menunjukkan waktu pemuatan.

Pembaruan Tambahan di Chrome 106

Penyempurnaan lain pada Chrome 106 meliputi:

  • Anda dapat mengekspor rekaman skrip Anda tanpa masalah dari Perekam panel. Tombol ekspor mengalami masalah di versi sebelumnya.
  • Anda sekarang memiliki pemilih warna di Gaya elemen SVG panel.
  • 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-fitur ini dapat meningkatkan cara Anda menggunakan alat pengembangan browser.

Apa yang Anda Dapatkan Dari Chrome 106

Peningkatan terbaru pada devtools di Chrome 106 membuat proses debug lebih cepat. Pembaruan baru memudahkan untuk memvisualisasikan operasi melalui konsol yang disederhanakan dan dinamis yang memungkinkan Anda menyembunyikan file, menonaktifkan skrip, merekam, dan memiliki tampilan aplikasi yang mendalam saat debugging.

Penambahan Chrome 106 akan memungkinkan Anda mengelola aplikasi dan mengoptimalkan kinerjanya. Lanjutkan dan nikmati manfaat ini dengan memperbarui Chrome 106 ke versi terbaru.