JS Debugging

10/09/2019

« Bài trước

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

Nhiều lỗi trong số này rất khó chẩn đoán.

Thông thường, khi mã lập trình chứa lỗi, sẽ không có gì xảy ra. Không có thông báo lỗi và bạn sẽ không nhận được dấu hiệu tìm kiếm lỗi ở đâu.

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

Javascript Debugger

Gỡ lỗi không dễ dàng. Nhưng may mắn thay, tất cả các trình duyệt hiện đại đều có trình gỡ lỗi JavaScript tích hợp.

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

Sử dụng 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ổ trình gỡ lỗi:

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

Tạo breakpoints

Trong cửa sổ trình gỡ lỗi, bạn có thể đặt các breakpoint trong mã JavaScript.

Tại mỗi breakpoint, JavaScript sẽ dừng thực thi và cho phép bạn kiểm tra các giá trị JavaScript.

Sau khi kiểm tra các giá trị, bạn có thể tiếp tục thực thi mã ( nhấn vào nút play).

Ví dụ tạo breakpoint trong cửa sổ gỡ lỗi :

JS Debugger

Từ khóa debugger

Từ khóa debugger dừng thực thi JavaScript và gọi (nếu có) chức năng gỡ lỗi. Điều này có chức năng tương tự như thiết lập breakpoint trong trình gỡ lỗi.

Khi trình gỡ lỗi được bật, mã này sẽ dừng thực thi trước khi nó thực thi dòng thứ ba.

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

Công cụ gỡ lỗi của trình duyệt

Thông thường, bạn kích hoạt gỡ lỗi trong trình duyệt của mình bằng F12 và chọn tag "console" trong menu 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 "Công cụ khác (More tools)".
  • Tiếp theo chọn "Công cụ dành cho nhà phát triển (Developer tools)".
  • Cuối cùng, chọn tab "console".

Firefox

  • Mở trình duyệt
  • Từ menu, chọn "Nhà phát triển web (Web Developer)".
  • Cuối cùng, chọn "Bảng điều khiển (Web Console)".

Safari

  • Mở trình duyệt, chọn tùy chọn (Preferences), chọn tab "Nâng cao (Advanced)".
  • Chọn "Hiển thị menu Phát triển trong thanh menu"
  • Khi 1 option mới "Phát triển (Develop)" xuất hiện trên menu : Chọn "Hiển thị bảng điều khiển Javascript (Show Error Console)"
« Bài trước
Back to top