JavaScript:
Sử dụng bộ gỡ lỗi
Cách thực hiện:
Dưới đây là một đoạn mã JavaScript không hoạt động như mong đợi:
function buggyMultiply(a, b) {
return a + b; // Ôi! Đây phải là phép nhân, không phải phép cộng.
}
let result = buggyMultiply(5, 3);
console.log('Kết quả:', result);Kết quả không chính xác:
Kết quả: 8Hãy debug trong Chrome DevTools:
- Mở JS này trong trình duyệt.
- Click chuột phải và chọn “Inspect” để mở DevTools.
- Click vào tab “Sources”.
- Tìm đoạn mã hoặc trang của bạn và đặt một điểm dừng (breakpoint) bằng cách click vào số dòng bên cạnh câu lệnh
return. - Làm mới trang để kích hoạt điểm dừng.
- Kiểm tra bảng “Scope” để xem các biến cục bộ
avàb. - Bước qua với nút “Step over next function call”.
- Nhận diện lỗi trong câu lệnh
return. - Sửa đoạn mã:
function buggyMultiply(a, b) {
return a * b; // Đã sửa!
}
let result = buggyMultiply(5, 3);
console.log('Kết quả:', result);Kết quả đã sửa:
Kết quả: 15Tìm hiểu sâu hơn
Khái niệm về việc debug tồn tại từ những ngày đầu của ngành máy tính - truyền thuyết kể rằng nó bắt đầu khi một con bướm được tìm thấy trong máy tính vào những năm 1940! Ngày nay, các công cụ debugger JavaScript như công cụ tích hợp sẵn trong trình duyệt (Chrome DevTools, Firefox Developer Tools) hoặc debugger tích hợp trong IDE (Visual Studio Code, WebStorm) cung cấp rất nhiều tính năng.
Những lựa chọn thay thế cho các debugger tích hợp sẵn bao gồm các công cụ của bên thứ ba như WebStorm hoặc sử dụng cách cũ console.log để xuất trạng thái của biến. Nhưng những phương pháp này không cung cấp sự tương tác thời gian thực và việc kiểm tra chi tiết như debugger.
Về chi tiết triển khai, hầu hết các debugger hoạt động tương tự nhau: chúng cho phép bạn đặt các điểm dừng, tạm dừng việc thực thi, bước qua mã, kiểm tra trạng thái biến hiện tại, theo dõi các biểu thức và thậm chí là thao tác giá trị ngay lập tức để kiểm thử các tình huống khác nhau.