JavaScript의 중단점
이 기사에서는 중단점의 사용법과 이점, 그리고 debugger 키워드와 브라우저의 디버거 모드를 사용하여 JavaScript 코드를 디버그하는 방법에 대해 설명합니다.
중단점
대부분의 경우 프로그램 코드에는 논리적 구문 오류가 거의 없으며 프로그램은 주어진 명령문에 따라 원하는 결과를 제공하지 않습니다. 따라서 오류를 해결하고 프로그램 코드를 디버그하려면 실행을 중지하고 각 단계의 실행 흐름을 확인해야 합니다.
우리는 프로그램에서 중단점을 사용하여 실행을 중지하고 다양한 프로그래밍 언어에는 특히 중단점 키워드가 포함되어 있습니다.
대부분의 경우 오류는 오류 메시지나 로그를 표시하지 않으며 실제 문제가 무엇인지 알아내야 하기 때문에 중단점 키워드는 코드 실행 시간 동안 실행을 중지합니다.
JavaScript의 중단점
디버깅은 까다로운 프로세스이며 이제 대부분의 브라우저는 내장 JavaScript 디버거를 제공합니다. 디버거로 중단점을 설정하고 실행을 중지해야 하는 위치를 정의할 수 있습니다.
코드를 실행하는 동안 런타임에 변수 값을 검사할 수 있습니다.
F12 키를 눌러 브라우저에서 디버깅을 활성화하고 디버거 메뉴에서 콘솔 섹션을 선택합니다. 브라우저가 디버깅을 지원하는 경우 console.log() 메서드를 사용하여 값을 표시하고 검사할 수 있습니다.
콘솔의 예:
<!DOCTYPE html>
<html>
<body>
<h1>Delftstack learning</h1>
<h2>JavaScript debugger keyword example</h2>
<p>You can on debugger with F12 key and select console in debugger menu.</p>
<script>
a = 2;
b = 4;
sum = a + b;
console.log(c); // it will display the value of sum variable
</script>
</body>
</html>
위의 HTML 소스에서 console.log() 기본 메소드를 사용하여 a와 b 변수의 합계를 표시했습니다. 디버거 모드의 로그인 console 섹션을 볼 수 있습니다.
JavaScript 코드에 대한 디버거 창에서 중단점을 설정할 수 있으며 각 중단점에서 실행이 중지되어 JavaScript 값을 검사하는 데 도움이 됩니다. 디버거 창의 재생 버튼으로 실행을 다시 시작할 수 있습니다.
JavaScript의 Debugger 키워드
JavaScript debugger 키워드는 코드 문에서 실행을 중지하는 데 사용됩니다. 디버거에서 중단점을 설정하는 것과 동일한 기능을 수행합니다.
디버거의 예:
<!DOCTYPE html>
<html>
<body>
<h1>Delftstack learning</h1>
<h2>JavaScript debugger keyword example</h2>
<p id="test"></p>
<p>You can on debugger and see the execution will be stop at third line.</p>
<script>
let sum = 15 + 5;
debugger; // to stop execution
document.getElementById("test").innerHTML = sum;
</script>
</body>
</html>
위의 HTML 소스에서 JavaScript 코드에서 debugger 키워드를 사용하여 실행을 중지하고 getElementById("id").innerHTML를 사용하여 단락에 sum 변수를 할당했습니다.