Cara sidebar Breakpoints baru membantu Anda men-debug lebih cepat

Kim-Anh Tran
Kim-Anh Tran
Vaatika Dabra Groth
Vaatika Dabra Groth

Panel sidebar titik henti sementara lama dan baru berdampingan.

Jika Anda menggunakan Chrome 111 atau yang lebih baru, Anda mungkin sudah melihat bahwa kami telah mengubah desain sidebar titik henti sementara. Dengan Chrome 113, sidebar baru sepenuhnya menggantikan desain lama. Tujuan kami dengan desain ulang ini adalah meningkatkan alur kerja titik henti sementara dengan:

Memberikan ringkasan yang lebih baik tentang semua titik henti sementara yang ditetapkan. Membuat alur kerja pengguna umum dengan titik henti sementara lebih mudah diakses dan lebih intuitif. Menampilkan fitur titik henti sementara yang keren dan sudah ada.

Postingan ini mengasumsikan bahwa Anda sudah memahami cara men-debug menggunakan titik henti sementara. Jika Anda belum pernah menggunakan titik henti sebelumnya, buka ringkasan tentang titik henti ini dan pelajari lebih lanjut cara menggunakan titik henti untuk men-debug kode Anda.

Sekarang, mari kita lihat apa yang ditawarkan desain ulang ini, dan cara Anda dapat memanfaatkan sidebar baru. Perhatikan bahwa desain ulang ini berfokus untuk membuat fitur yang ada lebih intuitif digunakan dan lebih mudah diakses, bukan menambahkan fitur baru.

Menjeda pada pengecualian untuk menyelidiki alasan kode Anda memunculkan error

Jeda pada pengecualian yang tertangkap dan tidak tertangkap.

Apakah kode Anda menampilkan pengecualian? Jangan khawatir. Chrome DevTools memungkinkan Anda menjeda pengecualian untuk menghentikan eksekusi pada titik saat pengecualian Anda dilempar. Hal ini dapat membantu Anda menyelidiki dan lebih memahami situasi saat kode Anda memunculkan error. Anda dapat memilih apakah ingin menjeda pada pengecualian yang tertangkap, pengecualian yang tidak tertangkap, atau keduanya, dengan mencentang kotak yang sesuai di sidebar.

Mengelola titik henti sementara: perluas grup titik henti sementara yang relevan, dan ciutkan grup lainnya untuk berfokus pada hal yang relevan

Menciutkan dan meluaskan grup titik henti sementara.

Titik henti sementara dapat tersebar di beberapa file. Sidebar titik henti sementara mengelompokkan titik henti sementara menurut file tempat titik henti sementara tersebut berada. Fokuslah hanya pada breakpoint yang penting untuk sesi penelusuran bug saat ini dengan meluaskan grup breakpoint yang relevan, dan menciutkan grup lainnya.

Mengelola titik henti sementara: satu klik untuk membuka kode, menghapus, atau mengaktifkan/menonaktifkan titik henti sementara

Sidebar titik henti memungkinkan Anda menyelesaikan tugas umum dengan sekali klik. Berikut ringkasan cara Anda dapat ...

Buka lokasi titik henti sementara di Editor Kode. Hapus satu titik henti sementara atau semua titik henti sementara dalam file. Aktifkan atau nonaktifkan satu titik henti sementara atau semua titik henti sementara dalam file.

Dan semua ini hanya dengan sekali klik. Tentu saja, opsi ini juga tersedia di menu konteks:

Buka lokasi titik henti sementara dengan mengklik cuplikan kode titik henti sementara

Buka lokasi kode sumber di editor kode.

Apakah Anda ingin memeriksa di mana Anda telah menetapkan titik henti sementara dalam kode, dan menganalisis kode di sekitarnya? Cukup klik cuplikan kode titik henti sementara di dalam sidebar, dan lokasi kode akan terbuka di editor kode.

Hapus satu titik henti sementara atau semua titik henti sementara dalam file dengan mengklik tombol hapus

Menghapus satu titik henti sementara atau semua titik henti sementara dalam file.

Arahkan kursor ke titik henti sementara atau grup titik henti sementara untuk menampilkan tombol hapus yang menghapus satu atau semua titik henti sementara dalam file saat diklik.

Menonaktifkan satu atau semua titik henti sementara dalam file

Aktifkan atau nonaktifkan satu atau semua titik henti sementara dalam file.

Centang atau hapus centang pada kotak centang di samping titik henti sementara untuk mengaktifkan atau menonaktifkannya.

Untuk mengaktifkan atau menonaktifkan semua titik henti sementara dalam file, arahkan kursor ke grup titik henti sementara dan centang atau hapus centang kotak yang muncul di samping nama file.

Manfaatkan fitur titik henti sementara yang kurang dikenal ini: titik henti sementara kondisional dan titik log

Edit kondisi titik henti sementara atau ubah log logpoint dengan mengedit titik henti sementara

Edit kondisi titik henti sementara atau ubah log logpoint.

Edit kondisi titik henti sementara atau log dengan mengarahkan kursor ke titik henti sementara dan mengklik tombol edit yang muncul. Tindakan ini akan membuka dialog untuk mengubah jenis titik henti sementara dan detail titik henti sementara Anda.

Atau, pilih baris titik henti sementara di editor kode, lalu ketik Control+Alt+b di Linux dan Command+Alt+b di Mac untuk membuka dialog pengeditan titik henti sementara.

Anda juga dapat memeriksa ulang kondisi atau logpoint log dengan cepat dengan mengarahkan kursor ke titik henti sementara di sidebar:

Lihat log kondisi atau titik log.

Kesimpulan

Tujuan kami di balik desain ulang sidebar titik henti adalah untuk mempermudah proses penelusuran bug dengan titik henti. Yang terpenting, kami berupaya membuat semuanya lebih terstruktur, serta lebih mudah diakses dan dipahami. Kami harap peningkatan ini akan membantu Anda dalam sesi penelusuran bug berikutnya.

Jika Anda memiliki saran untuk peningkatan lebih lanjut, beri tahu kami dengan melaporkan bug.

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, 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.