Nếu đang sử dụng Chrome 111 trở lên, có thể bạn đã 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 làm việc với điểm ngắt bằng cách:
Cung cấp thông tin tổng quan rõ ràng 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à dễ dàng sử dụng hơn các quy trình làm việc thường dùng với điểm ngắt. Hiển thị các tính năng hiện có hữu ích của điểm ngắt.
Bài đăng này giả định rằng bạn đã quen 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 về điểm ngắt này 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 xem thiết kế lại mang lại những lợi ích gì và cách bạn có thể sử 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 dễ sử dụng và dễ truy cập hơn, thay vì thêm các tính năng mới.
Tạm dừng khi có ngoại lệ để điều tra lý do mã của bạn gây ra lỗi
Mã của bạn có gây ra ngoại lệ không? Đừng lo lắng! Chrome DevTools cho phép bạn tạm dừng khi có ngoại lệ để dừng quá trình thực thi tại điểm ngoại lệ được đưa ra. Điều này có thể giúp bạn điều tra và hiểu rõ hơn về các trường hợp mà mã của bạn gây ra lỗi. Bạn có thể chọn tạm dừng khi có ngoại lệ đã xử lý, ngoại lệ chưa xử lý hoặc cả hai bằng cách đánh dấu vào các hộp kiểm tương ứng trong thanh bên.
Quản lý đ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
Điểm ngắt có thể nằm rải rác trong 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 còn lại.
Quản lý điểm ngắt: một cú nhấp chuột để 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 thực hiện các tác vụ thường dùng chỉ bằng một cú nhấp chuột. 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 điểm ngắ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à tất cả những điều này chỉ bằng một cú nhấp chuột! 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
Bạn có muốn kiểm tra vị trí trong mã mà bạn đã đặt điểm ngắt và phân tích mã xung quanh không? Chỉ cần nhấp vào đoạn mã của một điểm ngắt trong thanh bên, đoạn mã đó sẽ 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á
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á. Nút này sẽ xoá một hoặc tất cả điểm ngắt trong một tệp khi bạn nhấp vào.
Tắt một hoặc tất cả điểm ngắt trong một tệp
Đánh dấu hoặc bỏ đánh dấu vào hộp 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 vào hộp xuất hiện bên cạnh tên tệp.
Sử dụng các tính năng ít được biết đến của điểm ngắt: đ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 nhật ký bằng cách di chuột qua một điểm ngắt rồi nhấp vào nút chỉnh sửa xuất hiện. Thao tác này sẽ mở 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 của bạn.
Ngoài ra, hãy chọn dòng điểm ngắt trong trình soạn thảo mã rồi nhập Control+Alt+b trên Linux và Command+Alt+b trên 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 nhật ký bằng cách di chuột qua điểm ngắt trong thanh bên:
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 là chúng tôi muốn làm cho mọi thứ 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 cải tiến này sẽ giúp 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 báo cáo 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 truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy các vấn đề trên trang web của mình trước khi người dùng tìm thấy!
Liên hệ với nhóm Chrome DevTools
Sử dụng các lựa chọn sau để thảo luận về các tính năng mới, bản cập nhật 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.
- Gửi ý kiến phản hồi và yêu cầu tính năng cho chúng tôi tại crbug.com.
- Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
- Đăng bài trên Twitter @ChromeDevTools.
- Để lại bình luận trên video YouTube về Nội dung mới trong Công cụ cho nhà phát triển hoặc video YouTube về Mẹo sử dụng Công cụ cho nhà phát triển.