JavaScript Debugging - Gỡ lỗi trong JavaScript

Các lỗi có thể sẽ xảy ra, mỗi khi bạn viết một vài dòng code trên máy tính.

Gỡ lỗi code(Code Debugging)

Code lập trình có thể chứa các lỗi cú pháp, hoặc các lỗi logic.

Nhiều trong số những lỗi này rất khó để chuẩn đoán.

Thường thì, khi code lập trình chứa các lỗi, không có gì sẽ xảy ra. Không có các thông báo lỗi, và bạn sẽ không có được chỉ dẫn đến nơi có thể tìm các lỗi.

Tìm đến (và sửa chữa) các lỗi trong code lập trình được gọi là gỡ lỗi(debugging).

Các trình gỡ lỗi JavaScript(JavaScript Debuggers)

Gỡ lỗi không dễ. Nhưng may mắn thay, tất cả các trình duyệt hiện đại có các trình gỡ lỗi xây dựng trong JavaScript.

Các trình gỡ lỗi xây dựng bên trong có thể bật và tắt, ép các lỗi phải được báo cho người dùng.

Với một trình gỡ lỗi, bạn cũng có thể đặt điểm dừng (những nơi thực thi code có thể bị dừng), và kiểm trả các biến trong khi code đang được thực thi.

Thông thường, nếu không làm theo các bước ở cuối của trang này, bạn kích hoạt gỡ lỗi trong trình duyệt với nút 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ị các giá trị JavaScript trong cửa sổ gỡ lỗi:

ví dụ

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Tip: Đọc nhiều hơn về phương thức console.log() trong chương JavaScript Console Reference.

Đặt các điểm dừng(Setting Breakpoints)

Trong cửa sổ gỡ lỗi, bạn có thể đặt các điểm dừng trong JavaScript code.

Tại mỗi điểm dừng, JavaScript sẽ dừng việc thực thi, và để bạn kiểm tra các giá trị JavaScript.

Sau khi kiểm tra các giá trị, bạn có thể bắt đầu thực thi tiếp code (thông thường là với nút play).

Từ khóa debugger

Từ khóa debugger debugger dừng sự thực thi của JavaScript, và gọi (nếu có hiệu lực) hàm gỡ lỗi.

Điều này có tác dụng giống như cài đặt một điểm dừng trong trình gỡ lỗi.

Nếu không có gỡ lỗi nào có sẵn, câu lệnh của trình gỡ lỗi không có hiệu lực.

Với trình gỡ lỗi được bật, code sau đa sẽ dừng thực thi trước khi nó thực thi dòng thức ba.

ví dụ

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Công cụ gỡ lỗi chính của trình duyệt(Major Browsers' Debugging Tools)

Thông thường, bạn kích hoạt gỡ lỗi trong trình duyệt bằng F12, và chọn "Console" trong menu của trình gỡ lỗi.

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".
Từ 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".
From "Developer", chọn "Developer tools".
Cuối cùng, chọn "Console".

Safari

Mở Safari, Preferences, Advanced trong menu chính.
Kiểm tra "Enable Show Develop menu trong thanh menu".
Khi lựa chọn mới "Develop", xuất hiện trong menu:
Chọn "Show Error Console".

Bạn có biết?

Gỡ lỗi là một quá trình của việc kiểm tra, tìm kiếm, và giảm thiểu các bug (lỗi) trong chương trình máy tính.

Bug(bọ) máy tính được biết đến đầu tiên là một con bọ thực sự (một con côn trùng) kẹt trong thiết bị điện tử =))))))).

Tags:

Bình luận đang bị khoá