Trong hướng dẫn này, bạn sẽ tìm hiểu về gỡ lỗi trong JavaScript với sự trợ giúp của các ví dụ.
Bạn có thể và sẽ gặp lỗi khi viết chương trình. Lỗi không nhất thiết là xấu. Trên thực tế, hầu hết thời gian, chúng giúp chúng tôi xác định các vấn đề với mã của chúng tôi. Điều cần thiết là bạn phải biết cách gỡ lỗi mã của mình và sửa lỗi.
Gỡ lỗi là quá trình kiểm tra chương trình, tìm ra lỗi và sửa chữa nó.
Có nhiều cách khác nhau để bạn có thể gỡ lỗi chương trình JavaScript của mình.
1. Sử dụng console.log ()
Bạn có thể sử dụng console.log()phương pháp để gỡ lỗi mã. Bạn có thể chuyển giá trị bạn muốn kiểm tra vào console.log()phương thức và xác minh xem dữ liệu có chính xác hay không.
Cú pháp là:
console.log(object/message);
Bạn có thể chuyển đối tượng vào console.log()hoặc đơn giản là một chuỗi thông báo.
Trong hướng dẫn trước, chúng tôi đã sử dụng console.log()phương pháp để in đầu ra. Tuy nhiên, bạn cũng có thể sử dụng phương pháp này để gỡ lỗi. Ví dụ,
let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )
Sử dụng console.log()phương pháp trong trình duyệt sẽ mở giá trị trong cửa sổ trình gỡ lỗi.
Hoạt động của phương thức console.log () trong trình duyệt
Các console.log()không phải là đặc trưng cho các trình duyệt. Nó cũng có sẵn trong các công cụ JavaScript khác.
2. Sử dụng trình gỡ lỗi
Các debuggertừ khóa dừng việc thực hiện các mã và gọi hàm gỡ lỗi.
Có debuggersẵn trong hầu hết các công cụ JavaScript.
Hãy xem một ví dụ,
let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);
Hãy xem cách bạn có thể sử dụng trình gỡ lỗi trong trình duyệt Chrome.
Hoạt động của trình gỡ lỗi trong trình duyệt
Chương trình trên tạm dừng việc thực thi chương trình trong dòng có chứa debugger.
Sau đó, bạn có thể tiếp tục điều khiển luồng sau khi kiểm tra chương trình.
Phần còn lại của mã sẽ thực thi khi bạn tiếp tục tập lệnh bằng cách nhấn phát trong bảng điều khiển.
Hoạt động của trình gỡ lỗi trong trình duyệt
3. Thiết lập các điểm ngắt
Bạn có thể đặt các điểm ngắt cho mã JavaScript trong cửa sổ trình gỡ lỗi.
JavaScript sẽ ngừng thực thi tại mỗi điểm ngắt và cho phép bạn kiểm tra các giá trị. Sau đó, bạn có thể tiếp tục thực thi mã.
Hãy xem một ví dụ bằng cách đặt một điểm ngắt trong trình duyệt Chrome.
Hoạt động của các điểm ngắt trong trình duyệt
Bạn có thể đặt các điểm ngắt thông qua công cụ Developers ở bất kỳ đâu trong mã.
Đặt các điểm ngắt tương tự như đặt trình gỡ lỗi vào mã. Ở đây, bạn chỉ cần thiết lập các điểm ngắt bằng cách nhấp vào số dòng của mã nguồn thay vì gọi hàm gỡ lỗi theo cách thủ công.
Trong các phương pháp trên, chúng tôi đã sử dụng trình duyệt Chrome để hiển thị các quy trình gỡ lỗi cho đơn giản. Tuy nhiên, đó không phải là lựa chọn duy nhất của bạn.
Tất cả các IDE tốt đều cung cấp cách để bạn gỡ lỗi mã. Quá trình gỡ lỗi có thể hơi khác một chút nhưng khái niệm đằng sau việc gỡ lỗi là như nhau.
