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
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
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
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á
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
Đá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 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:
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.
- Gửi ý kiến phản hồi và yêu cầu về 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 biểu tượ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.
- Gửi tweet đến @ChromeDevTools.
- Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.