Sử dụng các điểm ngắt để tạm dừng mã JavaScript của bạn. Hướng dẫn này giải thích từng loại điểm ngắt có trong Công cụ cho nhà phát triển, cũng như thời điểm sử dụng và cách đặt từng loại. Để xem hướng dẫn tương tác về quy trình gỡ lỗi, hãy xem bài viết Bắt đầu gỡ lỗi JavaScript trong Công cụ của Chrome cho nhà phát triển.
Tổng quan về thời điểm sử dụng từng loại điểm ngắt
Loại điểm ngắt phổ biến nhất là dòng mã. Tuy nhiên, việc đặt điểm ngắt dòng mã có thể không hiệu quả, đặc biệt là khi bạn không biết chính xác nơi cần tìm hoặc nếu bạn đang làm việc với một cơ sở mã lớn. Bạn có thể tiết kiệm thời gian khi gỡ lỗi bằng cách biết cách thức và thời điểm sử dụng các loại điểm ngắt khác.
| Loại điểm ngắt | Sử dụng tính năng này khi bạn muốn ... |
|---|---|
| Dòng mã | Tạm dừng trên một vùng mã chính xác. |
| Dòng mã có điều kiện | Tạm dừng trên một vùng mã chính xác, nhưng chỉ khi một số điều kiện khác đúng. |
| Điểm ghi nhật ký | Ghi nhật ký một thông báo vào Bảng điều khiển mà không tạm dừng quá trình thực thi. |
| DOM | Tạm dừng trên mã làm thay đổi hoặc xóa một nút DOM cụ thể hoặc nút con của nó. |
| XHR | Tạm dừng khi URL XHR chứa mẫu chuỗi. |
| Trình nghe sự kiện | Tạm dừng đối với mã chạy sau khi một sự kiện (chẳng hạn như click) được kích hoạt. |
| Ngoại lệ | Tạm dừng trên dòng mã trả về một trường hợp ngoại lệ đã phát hiện hoặc chưa nắm bắt. |
| Hàm | Tạm dừng bất cứ khi nào một hàm cụ thể được gọi. |
| Loại đáng tin cậy | Tạm dừng đối với trường hợp vi phạm Loại đáng tin cậy. |
Điểm ngắt dòng mã
Sử dụng điểm ngắt dòng mã khi bạn biết chính xác vùng mã cần điều tra. Công cụ cho nhà phát triển luôn tạm dừng trước khi dòng mã này được thực thi.
Cách đặt điểm ngắt dòng mã trong Công cụ cho nhà phát triển:
- Nhấp vào thẻ Nguồn.
- Mở tệp có chứa dòng mã bạn muốn ngắt kết nối.
- Chuyển đến dòng mã.
- Ở bên trái của dòng mã là cột số dòng. Nhấp vào đó. Một biểu tượng màu xanh dương sẽ xuất hiện ở đầu cột số dòng.
Ví dụ này cho thấy điểm ngắt dòng mã được đặt trên dòng 29.
Điểm ngắt dòng mã trong mã của bạn
Gọi debugger từ mã của bạn để tạm dừng trên dòng đó. Điều này tương đương với một điểm ngắt dòng mã, ngoại trừ việc điểm ngắt được đặt trong mã của bạn chứ không phải trong giao diện người dùng của Công cụ cho nhà phát triển.
console.log('a');
console.log('b');
debugger;
console.log('c');
Điểm ngắt dòng mã có điều kiện
Sử dụng điểm ngắt dòng mã có điều kiện khi bạn muốn dừng thực thi, nhưng chỉ khi một số điều kiện là đúng.
Các điểm ngắt như vậy sẽ hữu ích khi bạn muốn bỏ qua các điểm ngắt không liên quan đến trường hợp của mình, đặc biệt là trong vòng lặp.
Để đặt điểm ngắt dòng mã có điều kiện:
- Mở thẻ Nguồn.
- Mở tệp có chứa dòng mã bạn muốn ngắt kết nối.
- Chuyển đến dòng mã.
- Ở bên trái của dòng mã là cột số dòng. Nhấp chuột phải vào đó.
- Chọn Thêm điểm ngắt có điều kiện. Một hộp thoại sẽ xuất hiện bên dưới dòng mã.
- Nhập tình trạng của bạn vào hộp thoại.
- Nhấn Enter để kích hoạt điểm ngắt. Biểu tượng màu cam có dấu chấm hỏi sẽ xuất hiện ở đầu cột số dòng.
Ví dụ này cho thấy một điểm ngắt dòng mã có điều kiện chỉ kích hoạt khi x vượt quá 10 trong một vòng lặp ở vòng lặp i=6.
Ghi nhật ký các điểm ngắt dòng mã
Sử dụng các điểm ngắt dòng mã nhật ký (điểm nhật ký) để thông báo nhật ký tới Bảng điều khiển mà không cần tạm dừng thực thi và không làm lộn xộn mã của bạn với các lệnh gọi console.log().
Cách đặt điểm ghi nhật ký:
- Mở thẻ Nguồn.
- Mở tệp có chứa dòng mã bạn muốn ngắt kết nối.
- Chuyển đến dòng mã.
- Ở bên trái của dòng mã là cột số dòng. Nhấp chuột phải vào đó.
- Chọn Thêm điểm ghi nhật ký. Một hộp thoại sẽ xuất hiện bên dưới dòng mã.
Nhập thông điệp nhật ký vào hộp thoại. Bạn có thể sử dụng cú pháp giống như khi thực hiện với lệnh gọi
console.log(message).Ví dụ: bạn có thể ghi:
"A string " + num, str.length > 1, str.toUpperCase(), objTrong trường hợp này, thông báo được ghi lại sẽ là:
// str = "test" // num = 3 // obj = {attr: "x"} A string 42 true TEST {attr: 'x'}Nhấn Enter để kích hoạt điểm ngắt. Một biểu tượng màu hồng có hai chấm sẽ xuất hiện ở đầu cột số dòng.
Ví dụ này cho thấy một điểm ghi nhật ký ở dòng 30, có chức năng ghi lại một chuỗi và một giá trị biến vào Console (Bảng điều khiển).
Chỉnh sửa điểm ngắt dòng mã
Sử dụng ngăn Breakpoints (Điểm ngắt) để tắt, chỉnh sửa hoặc xoá các điểm ngắt dòng mã.
Chỉnh sửa nhóm điểm ngắt
Ngăn Breakpoints (Điểm ngắt) nhóm các điểm ngắt theo tệp và sắp xếp chúng theo số dòng và cột. Bạn có thể thực hiện những việc sau với nhóm:
- Để thu gọn hoặc mở rộng một nhóm, hãy nhấp vào tên của nhóm đó.
- Để bật hoặc tắt từng nhóm hoặc điểm ngắt, hãy nhấp vào
bên cạnh nhóm hoặc điểm ngắt đó. - Để xóa một nhóm, hãy di chuột qua nhóm đó rồi nhấp vào
.
Video này hướng dẫn cách thu gọn nhóm và tắt hoặc bật các điểm ngắt lần lượt hoặc theo nhóm. Khi bạn tắt một điểm ngắt, bảng điều khiển Sources (Nguồn) sẽ tạo điểm đánh dấu bên cạnh số dòng trong suốt.
Các nhóm sẽ có trình đơn theo bối cảnh. Trong ngăn Breakpoints (Điểm ngắt), hãy nhấp chuột phải vào một nhóm rồi chọn:
- Xoá mọi điểm ngắt trong tệp (nhóm).
- Tắt mọi điểm ngắt trong tệp.
- Bật mọi điểm ngắt trong tệp.
- Xoá mọi điểm ngắt (trong tất cả các tệp).
- Xoá các điểm ngắt khác (trong các nhóm khác).
Chỉnh sửa điểm ngắt
Cách chỉnh sửa điểm ngắt:
- Nhấp vào
bên cạnh một điểm ngắt để bật hoặc tắt điểm ngắt đó. Khi bạn tắt một điểm ngắt, bảng điều khiển Sources (Nguồn) sẽ tạo điểm đánh dấu bên cạnh số dòng trong suốt. - Di chuột qua điểm ngắt, nhấp vào
để chỉnh sửa và nhấp vào 
để xóa điểm ngắt đó. Khi chỉnh sửa điểm ngắt, hãy thay đổi loại điểm ngắt từ danh sách thả xuống trong trình chỉnh sửa cùng dòng.
Nhấp chuột phải vào một điểm ngắt để xem trình đơn theo bối cảnh của điểm ngắt đó rồi chọn một trong các lựa chọn:
- Hiển thị vị trí.
- Chỉnh sửa điều kiện hoặc điểm ghi nhật ký.
- Bật mọi điểm ngắt.
- Tắt mọi điểm ngắt.
- Xoá điểm ngắt.
- Xoá các điểm ngắt khác (trong tất cả các tệp).
- Xoá mọi điểm ngắt (trong tất cả các tệp).
Xem video để thấy nhiều thao tác chỉnh sửa điểm ngắt: tắt, xoá, chỉnh sửa điều kiện, hiển thị vị trí từ trình đơn và thay đổi loại.
Điểm ngắt thay đổi DOM
Sử dụng điểm ngắt thay đổi DOM khi bạn muốn tạm dừng trên mã làm thay đổi nút DOM hoặc nút con của nó.
Để đặt điểm ngắt thay đổi DOM:
- Nhấp vào thẻ Phần tử.
- Chuyển đến phần tử mà bạn muốn đặt điểm ngắt.
- Nhấp chuột phải vào phần tử đó.
- Di chuột qua Bật/tắt, sau đó chọn Sửa đổi cây con, Sửa đổi thuộc tính hoặc Xoá nút.
Ví dụ này cho thấy trình đơn theo bối cảnh để tạo điểm ngắt thay đổi DOM.
Bạn có thể tìm thấy danh sách các điểm ngắt thay đổi DOM tại:
- Phần tử > Ngăn Điểm ngắt DOM.
- Nguồn > Ngăn bên Điểm ngắt DOM.
Tại đó, bạn có thể:
- Bật hoặc tắt các tiện ích đó bằng
. - Nhấp chuột phải > Xoá hoặc Hiển thị trong DOM.
Các loại điểm ngắt thay đổi DOM
- Sửa đổi cây con. Được kích hoạt khi thành phần con của nút đang được chọn bị xoá hoặc thêm hoặc nội dung của nút con cháu thay đổi. Không được kích hoạt khi thuộc tính nút con thay đổi hoặc khi có bất kỳ thay đổi nào đối với nút đang được chọn.
- Sửa đổi thuộc tính: Được kích hoạt khi một thuộc tính được thêm hoặc xoá trên nút đang được chọn hoặc khi một giá trị thuộc tính thay đổi.
- Xoá nút: Được kích hoạt khi nút đang được chọn bị xoá.
Điểm ngắt tìm nạp/XHR
Sử dụng điểm ngắt XHR/tìm nạp khi bạn muốn ngắt khi URL yêu cầu của XHR chứa một chuỗi đã chỉ định. Công cụ cho nhà phát triển tạm dừng trên dòng mã mà XHR gọi send().
Một ví dụ về trường hợp này là hữu ích khi bạn thấy rằng trang của mình yêu cầu URL không chính xác và bạn muốn nhanh chóng tìm thấy mã nguồn AJAX hoặc Tìm nạp gây ra yêu cầu không chính xác.
Để đặt điểm ngắt XHR/tìm nạp:
- Nhấp vào thẻ Nguồn.
- Mở rộng ngăn XHR Breakpoints (Điểm ngắt XHR).
- Nhấp vào
Thêm điểm ngắt. - Nhập chuỗi mà bạn muốn ngắt kết nối. Công cụ cho nhà phát triển tạm dừng khi chuỗi này hiện diện ở bất cứ đâu trong URL yêu cầu của XHR.
- Nhấn phím Enter để xác nhận.
Ví dụ này cho thấy cách tạo điểm ngắt XHR/tìm nạp trong XHR/Tìm nạp điểm ngắt cho bất kỳ yêu cầu nào chứa org trong URL.
Điểm ngắt trình nghe sự kiện
Sử dụng các điểm ngắt của trình nghe sự kiện khi bạn muốn tạm dừng trên mã trình nghe sự kiện chạy sau khi một sự kiện được kích hoạt. Bạn có thể chọn các sự kiện cụ thể, chẳng hạn như click hoặc các danh mục sự kiện, chẳng hạn như tất cả sự kiện chuột.
- Nhấp vào thẻ Nguồn.
- Mở rộng ngăn Event Listener Breakpoints (Điểm ngắt của trình nghe sự kiện). Công cụ cho nhà phát triển hiển thị một danh sách các danh mục sự kiện, chẳng hạn như Ảnh động.
- Hãy chọn một trong các danh mục này để tạm dừng bất cứ khi nào bất cứ sự kiện nào từ danh mục đó được kích hoạt hoặc mở rộng danh mục và kiểm tra một sự kiện cụ thể.
Ví dụ này cho thấy cách tạo điểm ngắt trình nghe sự kiện cho deviceorientation.
Ngoài ra, Debugger (Trình gỡ lỗi) sẽ tạm dừng các sự kiện xảy ra trong trình chạy web hoặc worklet thuộc bất kỳ loại nào, bao gồm cả Worklet bộ nhớ dùng chung.
Ví dụ này cho thấy Debugger (Trình gỡ lỗi) bị tạm dừng trên một sự kiện setTimer xảy ra trong một trình chạy dịch vụ.
Bạn cũng có thể tìm thấy danh sách trình nghe sự kiện trong ngăn Phần tử > Trình xử lý sự kiện.
Điểm ngắt ngoại lệ
Sử dụng các điểm ngắt ngoại lệ khi bạn muốn tạm dừng trên dòng mã trả về một ngoại lệ đã phát hiện hoặc chưa nắm bắt. Bạn có thể tạm dừng cả hai trường hợp ngoại lệ trên một cách độc lập trong bất kỳ phiên gỡ lỗi nào khác ngoài Node.js.
Trong ngăn Breakpoints (Điểm ngắt) của thẻ Sources (Nguồn), hãy bật một trong các lựa chọn sau hoặc cả hai, rồi thực thi mã:
Đánh dấu
Tạm dừng khi gặp các trường hợp ngoại lệ chưa được nắm bắt.
Trong ví dụ này, quá trình thực thi bị tạm dừng trong một trường hợp ngoại lệ chưa được nắm bắt.
Đánh dấu vào
Tạm dừng khi phát hiện được các trường hợp ngoại lệ.
Trong ví dụ này, quá trình thực thi bị tạm dừng khi có một ngoại lệ bị phát hiện.
Trường hợp ngoại lệ trong lệnh gọi không đồng bộ
Khi bật một hoặc cả hai hộp đánh dấu bị phát hiện và chưa nắm bắt, Trình gỡ lỗi sẽ cố gắng tạm dừng các trường hợp ngoại lệ tương ứng trong cả lệnh gọi đồng bộ và không đồng bộ. Trong trường hợp không đồng bộ, Debugger (Trình gỡ lỗi) sẽ tìm các trình xử lý từ chối theo các lời hứa để xác định thời điểm dừng.
Phát hiện các ngoại lệ và mã bị bỏ qua
Khi Danh sách bỏ qua được bật, Trình gỡ lỗi sẽ tạm dừng đối với các ngoại lệ bị phát hiện trong các khung không bị bỏ qua hoặc truyền qua một khung như vậy trong ngăn xếp lệnh gọi.
Ví dụ tiếp theo cho thấy Debugger (Trình gỡ lỗi) bị tạm dừng trong một ngoại lệ phát hiện được do library.js bị bỏ qua gửi qua mycode.js không bị bỏ qua.
Để tìm hiểu thêm về hành vi của Trình gỡ lỗi trong các trường hợp hiếm gặp, hãy kiểm thử một tập hợp tình huống trên trang minh hoạ này.
Điểm ngắt hàm
Gọi debug(functionName), trong đó functionName là hàm bạn muốn gỡ lỗi, khi bạn muốn tạm dừng bất cứ khi nào một hàm cụ thể được gọi. Bạn có thể chèn debug() vào mã của mình (như câu lệnh console.log()) hoặc gọi mã đó từ Bảng điều khiển công cụ cho nhà phát triển. debug() tương đương với việc đặt điểm ngắt dòng mã trên dòng đầu tiên của hàm.
function sum(a, b) {
let result = a + b; // DevTools pauses on this line.
return result;
}
debug(sum); // Pass the function object, not a string.
sum();
Đảm bảo hàm mục tiêu nằm trong phạm vi
Công cụ cho nhà phát triển sẽ gửi một ReferenceError nếu hàm bạn muốn gỡ lỗi không nằm trong phạm vi.
(function () {
function hey() {
console.log('hey');
}
function yo() {
console.log('yo');
}
debug(yo); // This works.
yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.
Bạn có thể gặp khó khăn khi gọi debug() từ Bảng điều khiển công cụ cho nhà phát triển để đảm bảo hàm mục tiêu nằm trong phạm vi. Dưới đây là một chiến lược:
- Đặt điểm ngắt dòng mã ở vị trí nào đó trong phạm vi hàm.
- Kích hoạt điểm ngắt.
- Gọi
debug()trong Bảng điều khiển công cụ cho nhà phát triển khi mã vẫn bị tạm dừng tại điểm ngắt dòng mã của bạn.
Điểm ngắt loại đáng tin cậy
API Loại đáng tin cậy giúp bảo vệ chống lại các lỗ hổng bảo mật được gọi là tấn công tập lệnh trên nhiều trang web (XSS).
Trong ngăn Điểm ngắt của thẻ Nguồn, hãy chuyển đến mục Điểm ngắt vi phạm CSP rồi bật một trong các lựa chọn sau hoặc cả hai, sau đó thực thi mã:
Xem
Các lỗi vi phạm về bồn lưu trữ dữ liệu.
Trong ví dụ này, việc thực thi sẽ bị tạm dừng khi có một lỗi vi phạm về bồn lưu trữ dữ liệu.
Xem
Lỗi vi phạm chính sách.
Trong ví dụ này, quá trình thực thi bị tạm dừng do vi phạm chính sách. Chính sách Loại đáng tin cậy được thiết lập bằng
trustedTypes.createPolicy.
Bạn có thể tìm thêm thông tin về cách sử dụng API:
- Để tăng cường bảo mật cho bạn, hãy xem bài viết Ngăn chặn lỗ hổng bảo mật tập lệnh trên nhiều trang web dựa trên DOM bằng Loại đáng tin cậy.
- Để gỡ lỗi, hãy xem bài viết Triển khai gỡ lỗi CSP và Loại đáng tin cậy trong Công cụ của Chrome cho nhà phát triển.