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 yang lama dan baru secara berdampingan.

Jika 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 untuk meningkatkan alur kerja titik henti sementara dengan:

Memberikan ringkasan yang lebih baik tentang semua titik henti sementara yang disetel. Membuat alur kerja pengguna umum dengan titik henti sementara lebih mudah diakses dan lebih intuitif. Membuat fitur titik henti sementara yang ada agar terlihat.

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

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

Berhentilah pada pengecualian untuk menyelidiki mengapa kode Anda memberikan pesan error

Jeda pada pengecualian yang tertangkap dan tidak tertangkap.

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

Mengelola titik henti sementara: luaskan grup titik henti sementara yang relevan, dan ciutkan grup lain 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 sesuai dengan file asalnya. Fokus hanya pada grup yang penting bagi sesi proses debug Anda saat ini dengan memperluas grup titik henti sementara yang relevan dan menciutkan grup yang tersisa.

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

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

Buka lokasi titik henti sementara di Code Editor. Menghapus satu titik henti sementara atau semua titik henti sementara dalam file. Mengaktifkan atau menonaktifkan satu titik henti sementara atau semua titik henti sementara dalam file.

Dan semuanya dengan sekali klik! Tentu saja, opsi berikut juga tersedia di menu konteks:

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

Langsung ke lokasi kode sumber di editor kode.

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

Menghapus satu titik henti sementara atau semua titik henti sementara dalam file dengan mengklik tombol remove

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

Mengaktifkan atau menonaktifkan satu atau semua titik henti sementara dalam file.

Centang atau hapus centang pada kotak 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 pada kotak yang muncul di samping nama file.

Manfaatkan fitur titik henti sementara yang kurang dikenal ini: titik henti sementara dan logpoint bersyarat

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

Edit kondisi titik henti sementara atau ubah log logpoint.

Edit log atau kondisi titik henti sementara 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.

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

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

Lihat kondisi atau log logpoint.

Kesimpulan

Tujuan kami di balik desain ulang sidebar titik henti sementara adalah untuk mempermudah proses debug dengan titik henti sementara. Yang terpenting, kami berupaya membuat segala sesuatunya lebih terstruktur, serta lebih mudah diakses dan dipahami. Kami harap peningkatan ini akan membantu Anda pada sesi proses debug 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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.