Xử lí lỗi (debugging) là kĩ thuật cơ bản  cho những người học ngôn ngữ lập trình. Khi học JavaScript, nếu một chương trình bị lỗi, sẽ không có bất kì thông điệp cảnh báo nào xảy ra. Vậy làm thế nào để biết mình sai ở đâu? Sau đây là một số cách để debug một chương trình (hay đoạn mã) trong JavaScript:

Công cụ tích hợp sẵn (built-in debugger)

Dùng các công cụ debug tích hợp sẵn trong các trình duyệt web (built-in debugger)  bằng cách nhấn phím F12 và chọn Console (nếu dùng Chrome, IE hay Firefox). Cụ thể:

Trình duyệt Cách mở debugger
Chrome ·         C1: nhấp vào icon (3 chấm dọc) bên góc phải màn hình, chọn More tools > Developer tools > Console.

·         C2: F12 > Console

IE ·         C1: từ thanh menu chọn Tools > Developer tools

·         C2:F12

Firefox Cài Firebug tại http://www.getfirebug.com
Opera Làm theo hướng dẫn tại https://dev.opera.com/extensions/testing/
Safari Xem hướng dẫn cài Safari Firebug Lite tại http://extensions.apple.com


Phương thức console.log()

Sử dụng phương thức console.log() để hiển thị các giá trị trong cửa sổ công cụ debug tích hợp trong trình duyệt web.

Ví dụ chúng ta có đoạn mã:

Chạy Chrome và nhấn phím F12 sẽ có kết quả:

Thiết lập các điểm dừng (breakpoints)

Tại mỗi dòng mã, ta có thể thiết lập một breakpoint và JavaScript sẽ ngừng thực thi tại điểm đó để chúng ta kiểm tra giá trị. Sau khi kiểm tra giá trị xong, chúng ta có thể phục hồi lại quá trình thực thi đoạn mã.

Cách thiết lập breakpoint trong Chrome được hướng dẫn chi tiết tại https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints?hl=en (các trình duyệt khác có thể tìm hiểu thêm trên mạng).

Minh hoạ cách thiết lập điểm dừng đoạn mã trên trong Chrome:

Trong cửa sổ của debugger (sau khi nhấn phím F12) chọn Sources, giao diện lúc này trong như sau:

Nhấp chuột vào một hàng code nào đó (chẳng hạn như hàng 9) và nhìn xuống mục Breakpoints sẽ xuất hiện hàng code này, giao diện như sau:

Reload lại trang thì vùng bên ngoài cửa sổ debugger xuất hiện thanh chứa nút Resume script execution (F8) như sau:

Nhấn chuột vào nút này thì chương trình sẽ hoạt động lại bình thường.

Dùng từ khoá debugger

Giống như breakpoint, khi chúng ta đặt từ khoá debugger tại vị trí nào đó thì các đoạn mã sau từ khoá debugger sẽ ngừng thực thi khi debugger được bật (F12). Ví dụ dùng từ khoá debugger:

Tham khảo thêm

 

< JavaScript cơ bản