Câu lệnh debugger trong JavaScript dùng để đặt breakpoint (điểm dừng) trong code. Code dừng thực thi ngay khi gặp debugger và gọi hàm debugger (nếu có sẵn, ví dụ DevTools đang mở).
Ví dụ
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Debugger statement</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } </style> </head> <body> <h1>Câu lệnh debugger trong JavaScript</h1> <div class="result"></div> <br /> <button class="Btn">NHẤN VÀO ĐÂY</button> <h3>Nhấn nút để gọi hàm printTable()</h3> <script> let resEle = document.querySelector(".result"); let BtnEle = document.querySelector(".Btn"); function printTable(num) { for (let i = 1; i <= 10; i++) { debugger; resEle.innerHTML += i + " "; } } BtnEle.addEventListener("click", () => { printTable(); }); </script> </body> </html>
Kết quả
Khi DevTools mở và nhấn nút, trình duyệt sẽ dừng tại dòng debugger; trong vòng lặp. Bạn có thể kiểm tra biến i, num, call stack, step over/into/out.
Lưu ý: debugger không có tác dụng nếu DevTools không mở. Nên xóa hoặc bọc trong điều kiện if (process.env.NODE_ENV === 'development') cho production build.