Debugging là phương pháp hệ thống để loại bỏ lỗi. Tất cả bắt đầu từ việc thực thi test case. Khi chạy test case, kết quả thực tế so sánh với kỳ vọng. Nếu không tương ứng, phân tích nguyên nhân gốc rễ và chạy thêm test như regression test để đảm bảo kết quả đúng.
Để thiết kế trang web tĩnh, HTML được dùng rộng rãi. Để phát triển ứng dụng web động, JavaScript, ngôn ngữ scripting của web, nên được dùng. Để đảm bảo code không bug, lập trình viên dựa vào nhiều kỹ thuật debug. Tuy nhiên, JavaScript không có chức năng debug xuất sắc. May mắn thay, debug code JavaScript bằng Firebug, debugger dựa trên trình duyệt web, rất dễ dàng.
Giới thiệu một số thành phần của Firebug debugger:
- JSEditor – JavaScript Editor. Cho phép debug JS code bằng "Break on All Errors". Chỉ cần check option này để tạm dừng thực thi script.
- Script tab – Tab thứ 4 trên pane Firebug (sau Console, HTML, CSS). Panel script chia thành 2 sub-panel: bên trái là JS editor, bên phải có 2 sub-panel: Watch và Breakpoint.
- JSFileSelector – Hiển thị danh sách tất cả file JS trong trang.
- Breakpoint – Thực thi JS dừng tại breakpoint. Có 3 loại: Static, Conditional, Dynamic. Static: click dòng code trong Script panel. Conditional: đặt dựa trên điều kiện. Dynamic: đặt dựa trên tên function, có thể từ commandline dùng debug/undebug.
- List of breakpoints – Hiển thị tất cả breakpoint, có thể xóa breakpoint không cần.
- Watch Window – Hiển thị giá trị tất cả biến trong scope dưới dạng list. Khác với Visual Studio chỉ hiển thị biến được chọn.
Cài đặt Firebug Add-on
- Mở Mozilla Firefox. Góc trên phải có Open Menu.
- Click Open Menu -> Add-ons. Cửa sổ mới hiện ra.
- Trong ô tìm kiếm, gõ Firebug và nhấn Enter.
- Firebug add-on hiện ra. Click Install.
Firebug đã được thêm vào Firefox.
Cách Debug JavaScript code bằng Firebug
Quy trình 8 bước đơn giản:
- Viết code JS trong notepad, lưu đuôi .htm. Mở file .htm trong Firefox. Mở console Firebug.
- Đặt static breakpoint trên dòng code mong muốn. Xem dòng code bị breakpoint ở panel phải Script tab.
- Thực thi từng dòng bằng nút "Step Over" trên toolbar Firebug. Các nút khác: Continue (F8), Step Over (F10), Step Into (F11), Step Out.
- Quan sát giá trị hiển thị trên Watch Window.
- Xác định và sửa bug.
- Reload trang (Ctrl+R).
- Nếu thiếu giá trị biến trên Watch Window, dùng CommandLine API: debug(fn) đặt breakpoint đầu hàm, undebug(fn) xóa breakpoint.
- Chạy lại code sau khi sửa. Nếu còn bug, lặp lại 7 bước. Lưu file và preview trong Firefox.
Lập trình viên có thể loại bỏ cơn ác mộng fix bug nhờ Firebug. Với Firebug, debugging trở nên dễ dàng.