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ó sẵn 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 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, các điểm ngắt dòng mã có thể không hiệu quả khi đặt, đặc biệt nếu bạn không biết chính xác cần xem ở đâu 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 nhờ biết cách thức và thời điểm sử dụng các loại điểm ngắt.

Đ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 tìm hiểu. Công cụ cho nhà phát triển 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 Công cụ cho nhà phát triển:

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

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 dòng mã điểm ngắt, ngoại trừ việc điểm ngắt được đặt trong mã của bạn, không phải trong giao diện người dùng 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 điều kiện nào đó đú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 có chứa dòng mã bạn muốn ngắt kết nối.
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 đó.
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. 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ỉ được 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ã (đ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 có chứa dòng mã bạn muốn ngắt kết nối.
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ẽ hiển thị 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ư đối với lệnh gọi console.log(message).

   Ví dụ: bạn có thể ghi nhật ký:

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

   Trong trường hợp này, thông báo đã ghi sẽ là:

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

7. Nhấn 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 nhật ký ở dòng 30 ghi lại một chuỗi và một giá trị biến vào Bảng điều khiển.

Chỉnh sửa các đ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ể thực hiện những thao tá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 đó.
• Để xoá 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 từng điểm ngắt hoặc theo nhó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 Đ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 đ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 Sources (Nguồn) sẽ làm cho điểm đánh dấu bên cạnh số dòng trong suốt.
• Di chuột qua điểm ngắt và nhấp vào để chỉnh sửa và để 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 đ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 để 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 các điểm ngắt bằng "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 nhiễu 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 rồi 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 ở đâ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. Xem video tiếp theo để tìm hiểu quy trình làm việc.

Với lựa chọn 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ừ các điểm ngắt dòng mã và Điểm ngắt trình nghe sự kiện.

Không bao giờ tạm dừng ở đây có thể không thành cô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 lệnh tạm dừng. Trong mã được liên kết nguồn, không phải mọi vị trí điểm ngắt đều tương ứng với câu lệnh ban đầu gây ra lỗ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ã thay đổi nút DOM hoặc nút trẻ em.

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

1. Nhấp vào thẻ Elements.
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 lên mục Ngắt kết nối rồi chọn Sửa đổi cây con, Sửa đổi thuộc tính hoặc Xoá nút.

Ví dụ này hiển thị 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:

• Elements > 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 tính năng này bằng .
• Nhấp chuột phải > Xoá hoặc Hiển thị các đối tượng đó 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 phần tử con của nút đang được chọn bị xoá hoặc đã thêm hoặc nội dung của thành phần con thay đổi. Không được kích hoạt khi thuộc tính nút con thay đổi, hoặc trên 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 bị 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 phần tử được 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 là khi bạn thấy rằng 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 ra mã nguồn AJAX hoặc Tìm nạp 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 Sources (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 có chuỗi này bất kỳ vị trí nào trong URL yêu cầu của XHR.
5. Nhấn Enter để xác nhận.

Ví dụ này cho biết cách tạo điểm ngắt tìm nạp/XHR trong XHR/fetch Breakpoints (Điểm ngắt tìm nạp) 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 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 một kích hoạt sự kiện. 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ả các sự kiện chuột.

1. Nhấp vào bảng điều khiển Sources (Nguồn).
2. Mở rộng ngăn Điểm ngắt trình xử lý 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ư dưới dạng Ảnh động.
3. Chọn một trong các danh mục sau để tạm dừng bất cứ khi nào sự kiện bất kỳ từ 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 biết cách tạo điểm ngắt trình nghe sự kiện cho deviceorientation.

Ngoài ra, Trình gỡ lỗi cũng tạm dừng các sự kiện xảy ra trong nhân viên web hoặc worklet thuộc bất kỳ loại nào, bao gồm cả Công việc bộ nhớ dùng chung.

Ví dụ này cho thấy 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 mục Elements > Ngăn 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ã đang bị phát hiện hoặc ngoại lệ chưa được nắm bắt. Bạn có thể tạm dừng cả hai 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 trong các tuỳ chọn sau hoặc cả hai rồi thực thi mã:

• Chọn Tạm dừng khi 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 đối với một trường hợp ngoại lệ chưa nắm bắt được.

• Chọn 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 nắm bắt, 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à mã bị bỏ qua

Khi bạn bật Danh sách bỏ qua, Trình gỡ lỗi sẽ tạm dừng các ngoại lệ được 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 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 phức tạ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ã (như console.log()) hoặc gọi lệnh đó từ Bảng điều khiển Công cụ cho nhà phát triển. debug() tương đương với việc cài đặ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 Công cụ cho nhà phát triển Bảng điều khiể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 công cụ cho nhà phát triển trong khi mã vẫn bị tạm dừng trên dòng mã của bạn điểm ngắt.

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

API Loại đáng tin cậy cung cấp biện pháp bảo vệ chống lại tính bảo mật hoạt động khai thác đượ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 liên quan đến bồn rửa.

  

  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 sẽ bị tạm dừng khi có lỗi 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 này:

• Để 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ụ cho nhà phát triển của Chrome.