JavaScript의 debugger 문은 코드 내에 중단점(breakpoint)을 설정할 때 사용하는 구문입니다. 개발자 도구가 열려 있는 상태에서 코드 실행이 debugger 문을 만나면, 그 즉시 실행이 일시 중지되고 디버거가 호출됩니다(디버깅 환경이 활성화된 경우). 이를 통해 개발자는 해당 시점의 변수 값과 호출 스택을 자유롭게 확인하며 코드 흐름을 단계별로 분석할 수 있습니다.
참고로, 브라우저의 개발자 도구(DevTools)가 닫혀 있는 상태에서는 debugger 문이 아무런 영향을 주지 않으므로, 실제 서비스 코드에는 남기지 않는 것이 좋습니다.
JavaScript debugger 문 예제
다음은 버튼 클릭 시 printTable() 함수를 호출하고, 반복문 안에서 debugger 문으로 실행을 멈추는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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>Debugger statement in JavaScript.</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the printTable() function</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>실행 결과
페이지를 실행하면 아래와 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭한 후 브라우저 개발자 도구의 Sources 탭에서 디버거를 열면, 반복문이 매번 debugger 문에서 멈추는 것을 확인할 수 있습니다.
정리
debugger 문은 console.log() 대신 코드의 특정 지점에서 실행을 직접 멈추고 변수 상태를 살펴봐야 할 때 매우 유용합니다. 다만 배포 전에는 반드시 제거해야 하며, 필요하다면 빌드 도구를 통해 자동으로 제거되도록 설정하는 것이 안전합니다.