Tạm dừng mã với các điểm ngắt

Kayce Basques

Sofia Emelianova

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 DevTools, 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 với quy trình gỡ lỗi JavaScript trong Công cụ của Chrome cho nhà phát triển.

Thông tin 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à nếu bạn không biết chính xác vị trí 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 và thời điểm sử dụng các loại điểm ngắt khác.

Đ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 kiểm tra. DevTools luôn tạm dừng trước khi thực thi dòng mã này.

Cách đặt điểm ngắt dòng mã trong DevTools:

1. Nhấp vào bảng điều khiển Sources (Nguồn).
2. Mở tệp chứa dòng mã bạn muốn ngắt.
3. Chuyển đến dòng mã.
4. Ở bên trái của dòng mã là cột số dòng. Nhấp vào biểu tượng đó. 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 một điểm ngắt dòng mã được đặt trên dòng 29.

Điểm ngắt dòng mã trong mã

Gọi debugger bằng 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 quá trình 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 rất 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 bạn, đặc biệt là trong vòng lặp.

Cách đặt điểm ngắt dòng mã có điều kiện:

1. Mở bảng điều khiển Sources (Nguồn).
2. Mở tệp chứa dòng mã bạn muốn ngắt.
3. Chuyển đến dòng mã.
4. Ở bên trái dòng mã là cột số dòng. Nhấp chuột phải vào tệp đó.
5. Chọn Thêm điểm ngắt có điều kiện. Một hộp thoại sẽ hiển thị bên dưới dòng mã.
6. Nhập điều kiện của bạn vào hộp thoại.
7. Nhấn Enter để kích hoạt điểm ngắt. Mộ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 tại lần lặp i=6.

Ghi nhật ký điểm ngắt dòng mã

Sử dụng các điểm ngắt dòng mã (điểm nhật ký) trong nhật ký để ghi nhật ký thông điệp vào Bảng điều khiển mà không cần tạm dừng quá trình thực thi cũng như 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ý:

1. Mở bảng điều khiển Sources (Nguồn).
2. Mở tệp chứa dòng mã bạn muốn ngắt.
3. Chuyển đến dòng mã.
4. Ở bên trái của dòng mã là cột số dòng. Nhấp chuột phải vào đó.
5. 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ã.

6. 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 tương tự như khi gọi console.log(message).

   Ví dụ: bạn có thể ghi lại:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   Trong trường hợp này, thông báo được ghi lại là:

   // str = "test"
   // num = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. Nhấn phím Enter để kích hoạt điểm ngắt. Một biểu tượng màu hồng có hai dấu 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 ghi lại một chuỗi và giá trị biến vào Console.

Chỉnh sửa điểm ngắt dòng mã

Sử dụng phần Đ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

Phần Đ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à số cột. Bạn có thể làm những việc sau với các nhóm:

• Để thu gọn hoặc mở rộng một nhóm, hãy nhấp vào tên 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 đó.
• Để xoá một nhóm, hãy di chuột qua nhóm đó rồi nhấp vào biểu tượng .

Video này hướng dẫn cách thu gọn các nhóm và tắt hoặc bật các điểm ngắt theo từng nhóm hoặc theo từng điểm. Khi bạn tắt một điểm ngắt, bảng Sources (Nguồn) sẽ làm cho đ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 phầ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á tất cả điểm ngắt (trong tất 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 Nguồn sẽ làm cho điểm đánh dấu bên cạnh số dòng trở nên trong suốt.
• Di chuột qua một điểm ngắt rồi nhấp vào để chỉnh sửa và để xoá điểm ngắt đó.

• Khi chỉnh sửa một điểm ngắt, hãy thay đổi loại điểm ngắt đó trong 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 đ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 tất cả điểm ngắt.
  • Tắt tất cả các điểm ngắt.
  • Xoá điểm ngắt.
  • Xoá các điểm ngắt khác (trong tất cả tệp).
  • Xoá mọi điểm ngắt (trong tất cả các tệp).

Xem video để xem cách hoạt động của nhiều điểm chỉnh sửa: tắt, xoá, chỉnh sửa điều kiện, hiện vị trí trong trình đơn và thay đổi loại.

Bỏ qua điểm ngắt bằng tuỳ chọn "Không bao giờ tạm dừng ở đây"

Sử dụng điểm ngắt dòng mã Không bao giờ tạm dừng ở đây để bỏ qua các lần tạm dừng sẽ xảy ra vì các lý do khác. Điều này có thể hữu ích khi bạn đã bật các điểm ngắt ngoại lệ nhưng trình gỡ lỗi vẫn tiếp tục dừng trên một ngoại lệ đặc biệt gây ồn mà bạn không quan tâm đến việc gỡ lỗi.

Cách tắt tiếng vị trí nghỉ:

1. Trong bảng điều khiển Sources (Nguồn), hãy mở tệp nguồn và tìm dòng mà bạn không muốn ngắt.
2. Nhấp chuột phải vào số dòng trong cột số dòng ở bên trái, bên cạnh câu lệnh gây ra lỗi.
3. Trong trình đơn thả xuống, hãy chọn Không bao giờ tạm dừng tại đây. Điểm ngắt màu cam (có điều kiện) sẽ xuất hiện bên cạnh dòng.

Bạn cũng có thể tắt tiếng điểm ngắt trong khi tạm dừng thực thi. Hãy xem video tiếp theo để tìm hiểu quy trình làm việc.

Với tuỳ chọn Never pause here (Không bao giờ tạm dừng tại đây), bạn có thể tắt tiếng các câu lệnh của trình gỡ lỗi và mọi loại điểm ngắt khác, ngoại trừ điểm ngắt dòng mã và điểm ngắt trình nghe sự kiện.

Never pause here (Không bao giờ tạm dừng tại đây) có thể không hoạt động trên một dòng có nhiều câu lệnh nếu câu lệnh không được tạm dừng khác với câu lệnh gây ra trạng thái tạm dừng. Trong mã được liên kết nguồn, không phải vị trí điểm ngắt nào cũng tương ứng với câu lệnh ban đầu gây ra điểm ngắt.

Đ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ã thay đổi nút DOM hoặc các nút con của nút đó.

Để đặt điểm ngắt thay đổi DOM:

1. Nhấp vào thẻ Thành phần.
2. Chuyển đến phần tử bạn muốn đặt điểm ngắt.
3. Nhấp chuột phải vào phần tử.
4. Di chuột qua Break on (Ngừng tại), sau đó chọn Subtree modifications (Sửa đổi cây con), Attribute modifications (Sửa đổi thuộc tính) hoặc Node removal (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 trong:

• Ngăn Phần tử > Ngăn Điểm ngắt DOM.
• Sources (Nguồn) > Ngăn bên DOM Breakpoints (Điểm ngắt DOM).

Tại đó, bạn có thể:

• Bật hoặc tắt các tính năng này bằng .
• Nhấp chuột phải > Xoá hoặc Hiện các phần tử đó 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 một nút con của nút hiện đang được chọn bị xoá hoặc thêm, hoặc nội dung của nút con bị thay đổi. Không được kích hoạt khi thay đổi thuộc tính nút con hoặc bất kỳ thay đổi nào đối với nút hiện đ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 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 tìm nạp/XHR 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ã khi XHR gọi send().

Một ví dụ về trường hợp hữu ích của tính năng này là khi bạn thấy trang của mình đang yêu cầu một 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 đang gây ra yêu cầu không chính xác đó.

Cách đặt điểm ngắt tìm nạp/XHR:

1. Nhấp vào bảng điều khiển Nguồn.
2. Mở rộng ngăn XHR Breakpoints (Điểm ngắt XHR).
3. Nhấp vào Thêm điểm ngắt.
4. Nhập chuỗi mà bạn muốn ngắt. Công cụ cho nhà phát triển sẽ tạm dừng khi chuỗi này xuất hiện ở bất kỳ vị trí nào trong URL yêu cầu của XHR.
5. Nhấn phím Enter để xác nhận.

Ví dụ này cho biết cách tạo điểm ngắt XHR/tìm nạp trong XHR/điểm ngắt tìm nạp cho mọi yêu cầu chứa org trong URL.

Điểm ngắt trình nghe sự kiện

Sử dụng điểm ngắt 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 (ví dụ: tất cả sự kiện chuột).

1. Nhấp vào bảng điều khiển Nguồn.
2. 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ị danh sách các danh mục sự kiện, chẳng hạn như Ảnh động.
3. Chọn một trong các danh mục này để tạm dừng bất cứ khi nào có sự kiện nào đó trong danh mục đó được kích hoạt, hoặc mở rộng danh mục và chọn 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, Trình gỡ lỗi sẽ tạm dừng các sự kiện xảy ra trong trình thực thi 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 Trình gỡ lỗi đã tạm dừng trên một sự kiện setTimer xảy ra trong một worker 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 điểm ngắt ngoại lệ khi bạn muốn tạm dừng trên dòng mã đang gửi một ngoại lệ đã phát hiện hoặc chưa phát hiện. Bạn có thể tạm dừng cả hai trường hợp ngoại lệ đó 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 phần Breakpoints (Điểm ngắt) của bảng điều khiển Sources (Nguồn), hãy bật một hoặc cả hai tuỳ chọn sau, sau đó thực thi mã:

• Chọn Tạm dừng khi các trường hợp ngoại lệ chưa nắm bắt được.

  

  Trong ví dụ này, quá trình thực thi bị tạm dừng đối với một trường hợp ngoại lệ chưa nắm bắt được.

• Đánh dấu vào Tạm dừng khi phát hiện 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 trên một ngoại lệ đã phát hiện.

Ngoại lệ trong lệnh gọi không đồng bộ

Khi bạn bật một hoặc cả hai hộp đánh dấu đã phát hiện và chưa phát hiện, Trình gỡ lỗi sẽ cố gắng tạm dừng ở các 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 kiếm các trình xử lý từ chối trên các lời hứa để xác định thời điểm dừng lại.

Phát hiện ngoại lệ và bỏ qua mã

Khi bạn bật tuỳ chọn Ignore List (Danh sách bỏ qua), Debugger (Trình gỡ lỗi) sẽ tạm dừng khi gặp các trường hợp ngoại lệ được phát hiện trong các khung không bị bỏ qua hoặc khi 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 Trình gỡ lỗi bị tạm dừng trong một ngoại lệ bị phát hiện do library.js bị bỏ qua truyền 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 các 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ã (chẳng hạn như câu lệnh console.log()) hoặc gọi mã đó từ Bảng điều khiển DevTools. debug() tương đương với việc đặt mộ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 thuộc 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ể khó đảm bảo hàm mục tiêu nằm trong phạm vi nếu đang gọi debug() qua Bảng điều khiển công cụ cho nhà phát triển. Sau đây là một chiến lược:

1. Đặt một điểm ngắt dòng mã ở nơi nào đó hàm thuộc phạm vi.
2. Kích hoạt điểm ngắt.
3. Gọi debug() trong Bảng điều khiển DevTools trong khi mã vẫn bị tạm dừng ở điểm ngắt dòng mã.

Điểm ngắt Loại đáng tin cậy

API Loại đáng tin cậy giúp bảo vệ khỏi các hoạt động khai thác bảo mật còn được gọi là tấn công tập lệnh trên nhiều trang web (XSS).

Trong phần Breakpoints (Điểm ngắt) của bảng điều khiển Sources (Nguồn), hãy chuyển đến phần CSP Violation Breakpoints (Điểm ngắt vi phạm CSP) rồi bật một trong các tuỳ chọn sau hoặc cả hai, sau đó thực thi mã:

• Kiểm tra Lỗi vi phạm bồn lưu trữ dữ liệu.

  

  Trong ví dụ này, quá trình thực thi bị tạm dừng do một lỗi vi phạm về bồn lưu trữ dữ liệu.

• Kiểm tra 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 lỗi vi phạm chính sách. Bạn có thể thiết lập chính sách về Loại đáng tin cậy bằng trustedTypes.createPolicy.

Bạn có thể tìm thêm thông tin về cách sử dụng API:

• Để nâng cao mục tiêu bảo mật của bạn, hãy truy cập phần 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 với các Loại đáng tin cậy.
• Để gỡ lỗi, hãy xem bài viết Triển khai gỡ lỗi CSP và các kiểu đáng tin cậy trong Công cụ của Chrome cho nhà phát triển.