Bài viết này giải thích về cách thức gỡ lỗi (debug) code JavaScript.
Lỗi và gỡ lỗi:
- Lỗi (bug) là vấn đề thường gặp khi viết code. Lỗi có thể là lỗi cú pháp (syntax errors) hoặc lỗi logic (logical errors).
- Nhiều lỗi này khó chẩn đoán vì không có thông báo lỗi rõ ràng.
- Quá trình tìm và sửa lỗi trong code được gọi là gỡ lỗi.
Debugger trong JavaScript:
- Gỡ lỗi không dễ dàng, nhưng may mắn thay, tất cả các trình duyệt hiện đại đều có debugger JavaScript tích hợp sẵn.
- Debugger có thể được bật hoặc tắt, buộc các lỗi phải được báo cáo cho người dùng.
- Với debugger, bạn cũng có thể đặt breakpoints (điểm dừng thực thi code) và kiểm tra biến trong khi code đang chạy.
- Thông thường, bạn có thể kích hoạt debugger trong trình duyệt bằng phím F12 và chọn “Console” trong menu debugger.
Phương thức console.log():
Nếu trình duyệt của bạn hỗ trợ gỡ lỗi, bạn có thể sử dụng console.log() để hiển thị giá trị JavaScript trong cửa sổ debugger:
<!DOCTYPE <strong>html</strong>>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Đặt Breakpoints:
- Trong cửa sổ debugger, bạn có thể đặt breakpoints trong code JavaScript.
- Tại mỗi breakpoint, JavaScript sẽ dừng thực thi và cho phép bạn kiểm tra giá trị JavaScript.
- Sau khi kiểm tra giá trị, bạn có thể tiếp tục thực thi code (thường là bằng nút play).
Từ khóa debugger:
- Từ khóa
debuggerdừng thực thi JavaScript và gọi (nếu có) hàm gỡ lỗi. - Tác dụng tương tự như đặt breakpoint trong debugger.
- Nếu không có debugger,
debuggerkhông có tác dụng.
Các trình gỡ lỗi của các trình duyệt lớn:
- Thông thường, bạn có thể kích hoạt debugger trong trình duyệt bằng phím F12 và chọn “Console” trong menu debugger.
- Nếu không, hãy làm theo các bước sau:
Chrome:
- Mở trình duyệt.
- Từ menu, chọn “More tools”.
- Chọn “Developer tools”.
- Cuối cùng, chọn “Console”.
Firefox:
- Mở trình duyệt.
- Từ menu, chọn “Web Developer”.
- Cuối cùng, chọn “Web Console”.
Edge:
- Mở trình duyệt.
- Từ menu, chọn “Developer Tools”.
- Cuối cùng, chọn “Console”.
Opera:
- Mở trình duyệt.
- Từ menu, chọn “Developer”.
- Chọn “Developer tools”.
- Cuối cùng, chọn “Console”.
Safari:
- Vào Safari, Preferences, Advanced trong menu chính.
- Chọn “Enable Show Develop menu in menu bar”.
- Khi tùy chọn “Develop” xuất hiện trong menu:
- Chọn “Show Error Console”.
Tóm tắt:
- Debugging là quá trình tìm và sửa lỗi trong code JavaScript.
- Các trình duyệt hiện đại có debugger tích hợp sẵn để giúp bạn tìm lỗi dễ dàng hơn.
- Bạn có thể sử dụng
console.log()để hiển thị các giá trị JavaScript trong cửa sổ debugger. - Bạn có thể đặt breakpoint để dừng thực thi code tại một điểm cụ thể.
- Từ khóa
debuggercũng có thể được sử dụng để dừng thực thi code. - Mỗi trình duyệt có một cách khác nhau để truy cập vào debugger.
Kết luận.
Debugging là một kỹ năng quan trọng đối với bất kỳ lập trình viên JavaScript nào. Hiểu rõ cách sử dụng các công cụ debugging sẽ giúp bạn tiết kiệm thời gian và viết code tốt hơn.
