자바스크립트 코드를 디버깅 할 수 있는 가장 간단한 도구는 'debugger' 키워드다. 별도의 IDE 없이 브라우저의 개발자 도구와 debugger 키워드를 이용해서 자바스크립트 코드를 디버깅 할 수 있다.
debugger 키워드
자바스크립트 코드를 브라우저에서 디버깅하기 위해 'debugger'라는 키워드를 코드에 넣을 수 있다. 자바스크립트 실행 엔진이 코드를 수행하다가 'debugger'라는 키워드를 만나면 코드 실행이 그 부분에서 일시 중지되고 개발자의 판단을 기다리게 된다.
크롬의 개발자 도구에서 다음 코드를 실행해보자.
function method1 () {
value1 = 20;
debugger;
return value1 * 2;
}
console.log(method1())
이 코드를 실행해보자.
위 코드를 실행하면 개발자 도구의 'Sources' 탭이 활성화되고, method1() 메소드의 코드가 화면에 출력되면서 코드의 실행이 'debugger' 키워드 부분에서 멈추게 된다.
개발자 도구가 아닌 렌더링 된 웹 페이지가 출력되는 부분은 'Paused in debugger'라는 메시지와 함께 두 개의 버튼이 출력된다. 왼쪽의 버튼은 'Resume script execution(코드 실행 재개)' 버튼이고, 오른쪽 버튼은 'Step over next function call' 버튼이다. 일반적으로 IDE에서 제공하는 디버깅 툴과 비슷하다.
브라우저마다 다르고 개발자 도구마다 다를 수 있는데, 이렇게 실행이 일시 중지된 상황에서 변수들에 마우스 포인터를 가져가면 현재 변수 값이 popup 되어 보여진다.
console 접근
자바스크립트 코드 실행이 debugger 키워드에서 멈춰 있을 때, console 창에서 변수의 현재 스코프(scope)에 접근 할 수 있다. 즉, 수행이 멈춘 시점에서 지역변수의 값을 콘솔창을 통해서 접근할 수 있다.
debugger 키워드에서 멈춰있는 위 상태에서 console 창을 통해 'console.long(value1)'을 실행하면
현재 값을 console에 출력할 수 있다.
심지어는 이 상태에서 변수의 값을 마음대로 바꿀 수도 있다.
멈춘 상태에서 console 탭을 통해 'value1=30'을 입력하면 value1 변수에 30이라는 값을 세팅하게 된다.
다시 Sources 탭으로 돌아가서 마우스 오버해보면 30이라는 새로운 값이 설정되어 있는걸 볼 수 있다. C 언어로 컴파일 된 바이너리에 gdb를 붙여서 각종 변수들을 세팅해보면서 버그를 재현해보는 것과 비슷하다.
개발자 도구의 중단점(break point) 사용
개발자 도구의 'Sources' 탭에서 자바스크립트 소스코드를 찾은 다음 실행을 중단할 중단점(breakpoint)으로 사용할 코드 부분의 라인 번호를 클릭하면 그 곳에 'debugger' 키워드를 넣은 것처럼 해당 부분에서 실행을 멈추게 된다.
다른 언어의 IDE에서 제공하는 디버깅 툴처럼 웹 브라우저를 이용해서 자바스크립트 코드를 디버깅할 수 있다.
댓글