Tự học JS - Module 14: Debugging - Kỹ năng tìm và sửa lỗi như chuyên gia

Table of contents

1. Quy trình Debugging cơ bản

Khi code của bạn không chạy như ý, đừng đoán mò. Hãy kiểm tra các sự kiện thực tế theo quy trình:

1. Đọc (Read): Xem thông báo lỗi trong Console.
2. Tái hiện (Reproduce): Làm sao để lỗi đó xuất hiện lại?
3. Thu gọn (Reduce): Cắt bỏ các phần code không liên quan để tìm ra dòng lệnh gây lỗi.
4. Sửa (Fix): Chỉnh sửa và kiểm tra lại.

2. Kiểm tra lỗi trong Console

Mọi trình duyệt hiện đại đều có một công cụ gọi là Console. Bạn có thể mở nó bằng phím F12 (hoặc Ctrl+Shift+I).

• console.log(): In giá trị của biến ra màn hình để kiểm tra dòng chảy của code.
• console.warn() / console.error(): In ra các cảnh báo hoặc thông báo lỗi đỏ rực để dễ chú ý.

3. Từ khóa debugger

Bạn có thể cắm một “trạm dừng” trực tiếp trong code bằng từ khóa debugger.

let x = 15 * 5;
debugger; // Trình duyệt sẽ dừng thực thi tại đây
document.getElementById("demo").innerHTML = x;

Khi gặp dòng này, trình duyệt sẽ tạm dừng toàn bộ chương trình, cho phép bạn soi vào giá trị của từng biến tại thời điểm đó trước khi chạy tiếp.

4. Các loại lỗi thường gặp (Error Types)

• ReferenceError: Tên biến không tồn tại (có thể do viết sai chính tả hoặc chưa khai báo).
• TypeError: Bạn sử dụng giá trị sai cách (Ví dụ: gọi .length trên một biến đang là undefined).
• SyntaxError: Viết sai cú pháp (Thiếu dấu ngoặc, dấu chấm phẩy…).

5. Danh sách kiểm tra (Checklist) khi gặp lỗi

• Đã mở Console kiểm tra chưa?
• Thông báo lỗi nói dòng bao nhiêu?
• Đã dùng console.log() để xem giá trị thực tế của biến chưa?
• Có bị nhầm lẫn giữa = (gán) và === (so sánh) không?
• Các dấu ngoặc {} và () đã đóng đủ chưa?

Lời kết Module 14

Sửa được lỗi là cảm giác tuyệt vời nhất của lập trình viên. Hãy coi mỗi con bug là một cơ hội để bạn hiểu sâu hơn về ngôn ngữ. Trong Module 15 - bài cuối cùng của Series Core, chúng ta sẽ làm quen với JSON & AJAX để kết nối ứng dụng với thế giới bên ngoài.

Hẹn gặp lại các bạn!