Cách thanh bên Breakpoints (Điểm ngắt) mới giúp bạn gỡ lỗi nhanh hơn

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

Ngăn thanh bên điểm ngắt cũ và mới cạnh nhau.

Nếu đang sử dụng Chrome 111 trở lên, bạn có thể đã nhận thấy rằng chúng tôi đã thay đổi thiết kế của thanh bên điểm ngắt. Với Chrome 113, thanh bên mới sẽ thay thế hoàn toàn thiết kế cũ. Mục tiêu của chúng tôi khi thiết kế lại là cải thiện quy trình công việc của điểm ngắt bằng cách:

Cung cấp tổng quan tốt hơn về tất cả các điểm ngắt đã đặt. Giúp người dùng dễ dàng truy cập và thao tác hơn với các điểm ngắt trong quy trình công việc thông thường một cách trực quan hơn. Hiển thị các tính năng thú vị hiện có của điểm ngắt.

Bài đăng này giả định rằng bạn đã quen thuộc với việc gỡ lỗi bằng điểm ngắt. Nếu bạn chưa từng sử dụng điểm ngắt, hãy xem thông tin tổng quan này về điểm ngắt và tìm hiểu thêm về cách sử dụng điểm ngắt để gỡ lỗi mã.

Bây giờ, hãy cùng xem những tính năng của bản thiết kế lại và cách bạn có thể tận dụng thanh bên mới! Xin lưu ý rằng thiết kế lại tập trung vào việc giúp các tính năng hiện có trở nên trực quan và dễ sử dụng hơn, thay vì thêm các tính năng mới.

Tạm dừng khi gặp các trường hợp ngoại lệ để điều tra lý do mã của bạn gửi lỗi

Tạm dừng khi phát hiện các trường hợp ngoại lệ đã nắm bắt được và chưa nắm bắt được.

Mã của bạn có gửi một ngoại lệ không? Đừng lo! Công cụ cho nhà phát triển Chrome cho phép bạn tạm dừng các trường hợp ngoại lệ để dừng quá trình thực thi tại thời điểm gửi trường hợp ngoại lệ. Điều này có thể giúp bạn điều tra và hiểu rõ hơn về những trường hợp mã của bạn gửi lỗi. Bạn có thể chọn tạm dừng khi gặp ngoại lệ đã phát hiện, ngoại lệ chưa phát hiện hoặc cả hai bằng cách đánh dấu vào hộp đánh dấu tương ứng trong thanh bên.

Quản lý các điểm ngắt: mở rộng các nhóm điểm ngắt có liên quan và thu gọn các nhóm khác để tập trung vào những điểm ngắt có liên quan

Thu gọn và mở rộng các nhóm điểm ngắt.

Các điểm ngắt có thể được phân bổ trên nhiều tệp. Thanh bên điểm ngắt nhóm các điểm ngắt theo tệp mà chúng thuộc về. Chỉ tập trung vào những điểm ngắt quan trọng cho phiên gỡ lỗi hiện tại bằng cách mở rộng các nhóm điểm ngắt có liên quan và thu gọn các nhóm điểm ngắt còn lại.

Quản lý điểm ngắt: một lần nhấp để chuyển đến mã, xoá hoặc bật/tắt điểm ngắt

Thanh bên điểm ngắt cho phép bạn hoàn thành các tác vụ phổ biến chỉ bằng một lần nhấp. Dưới đây là thông tin tổng quan về cách bạn có thể ...

Chuyển đến vị trí điểm ngắt trong Trình soạn thảo mã. Xoá một hoặc tất cả điểm ngắt trong một tệp. Bật hoặc tắt một điểm ngắt hoặc tất cả điểm ngắt trong một tệp.

Và bạn chỉ cần nhấp một lần là có thể thực hiện tất cả những việc này! Tất nhiên, các tuỳ chọn này cũng có trong trình đơn theo bối cảnh:

Chuyển đến vị trí điểm ngắt bằng cách nhấp vào đoạn mã điểm ngắt

Chuyển đến vị trí mã nguồn trong trình soạn thảo mã.

Bạn có muốn kiểm tra vị trí đặt điểm ngắt trong mã và phân tích mã xung quanh không? Bạn chỉ cần nhấp vào đoạn mã của một điểm ngắt trong thanh bên để mở vị trí mã trong trình soạn thảo mã.

Xoá một điểm ngắt hoặc tất cả điểm ngắt trong một tệp bằng cách nhấp vào nút xoá

Xoá một điểm ngắt hoặc tất cả điểm ngắt trong một tệp.

Di chuột qua một điểm ngắt hoặc một nhóm điểm ngắt để hiển thị nút xoá. Khi nhấp vào nút này, một hoặc tất cả điểm ngắt trong tệp sẽ bị xoá.

Tắt một hoặc tất cả các điểm ngắt trong một tệp

Bật hoặc tắt một hoặc tất cả các điểm ngắt trong một tệp.

Đánh dấu hoặc bỏ đánh dấu hộp đánh dấu bên cạnh một điểm ngắt để bật hoặc tắt điểm ngắt đó.

Để bật hoặc tắt tất cả điểm ngắt trong một tệp, hãy di chuột qua nhóm điểm ngắt rồi đánh dấu hoặc bỏ đánh dấu hộp đánh dấu xuất hiện bên cạnh tên tệp.

Sử dụng các tính năng điểm ngắt ít được biết đến sau đây: điểm ngắt có điều kiện và điểm ghi nhật ký

Chỉnh sửa điều kiện điểm ngắt hoặc thay đổi nhật ký điểm ghi nhật ký bằng cách chỉnh sửa điểm ngắt

Chỉnh sửa điều kiện điểm ngắt hoặc thay đổi nhật ký điểm ghi nhật ký.

Chỉnh sửa điều kiện hoặc nhật ký điểm ngắt bằng cách di chuột qua một điểm ngắt rồi nhấp vào nút edit (chỉnh sửa) xuất hiện. Thao tác này sẽ mở ra một hộp thoại để thay đổi loại điểm ngắt và thông tin chi tiết về điểm ngắt.

Ngoài ra, hãy chọn dòng của điểm ngắt trong trình soạn thảo mã rồi nhập tổ hợp phím Control+Alt+b trên Linux và Command+Alt+b trên máy Mac để mở hộp thoại chỉnh sửa điểm ngắt.

Bạn cũng có thể nhanh chóng kiểm tra lại điều kiện hoặc nhật ký điểm ghi bằng cách di chuột qua điểm ngắt trong thanh bên:

Xem nhật ký điều kiện hoặc nhật ký điểm ghi nhật ký.

Kết luận

Mục tiêu của chúng tôi khi thiết kế lại thanh bên điểm ngắt là giúp việc gỡ lỗi bằng điểm ngắt trở nên dễ dàng hơn. Quan trọng nhất, chúng tôi muốn sắp xếp mọi thứ một cách có cấu trúc hơn, dễ truy cập và dễ hiểu hơn. Chúng tôi hy vọng những điểm cải tiến này sẽ giúp ích cho bạn trong phiên gỡ lỗi tiếp theo!

Nếu bạn có đề xuất để cải thiện thêm, hãy cho chúng tôi biết bằng cách gửi lỗi!

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.