좀 더 복잡한 코드를 작성하기 전에, 디버깅이란 것에 대해 이야기해보자.
디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 괒어을 의미한다. 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓는다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있다.
'Sources' 패널
Chrome 버전에 따라 보이는 화면은 약간씩 다를 수 있다. 하지만 버전이 바뀌어도 구성은 크게 바뀌지 않기 때문에 설명을 이어나가겠다.
- Chrome을 사용해 예시 페이지를 열기
F12(MacOS:cmd+Opt+I)를 눌러 개발자 도구를 연다.Sources탭을 클릭해Sources패널(panel)을 연다.
Sources 패널은 크게 세 개의 영역으로 구성된다.
- 파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다. Chrome 익스텐션이 여기 나타날 때도 있다.
- 코드 에디터 영역 – 리소스 영역에서 선택한 파일의 소스 코드를 보여준다. 여기서 소스 코드를 편집할 수도 있다.
- 자바스크립트 디버깅 영역 – 디버깅에 관련된 기능을 제공한다. 곧 자세히 살펴보겠다.
콘솔
Esc를 누르면 개발자 도구 하단부에 콘솔 창이 열린다. 여기에 명령어를 입력하고 Enter를 누르면 입력한 명령어가 실행된다.
콘솔 창에 구문(statement)를 입력하고 실행하면 아랫줄에 실행 결과가 출력된다.
1+2를 입력하고 3이 출력되고, hello("debugger")를 입력하면 undefined가 출력된다. undefined가 출력되는 이유는 hello("debugger")가 아무것도 반환하지 않기 때문이다.
중단점
예시 페이지 내부에서 무슨 일이 일어나는지 자세히 살펴보자. hello.js를 소스 코드 영역에 띄우고 네 번째 줄 코드 좌측의 줄 번호, 4를 클릭하자. 코드가 아닌 줄 번호 4에 마우스 커서를 옮긴 후 클릭해야 한다.
중단점(breakpoint) 은 말 그대로 자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다.
중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다. 디버깅이 가능해지는 것이다.
Sources 패널 우측 디버깅 영역을 보면 중단점 목록을 확인할 수 있다. 파일 여러 개에 다수의 중단점을 설정해 놓은 경우, 디버깅 영역을 이용하면 아래와 같은 작업을 할 수도 있다.
- 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수 있다.
- 체크 박스 선택을 해재해 해당 중단점을 비활성화 할 수 있다.
- 마우스 오른쪽 버튼을 클릭했을 때 나오는 'Remove reakpoint' 옵션을 통해 중단점을 삭제할 수도 있다.
- 이 외에도 다양한 기능이 있다.
조건부 중단점
줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점(conditional breakpoint) 을 설정할 수 있다. Add conditional breakpoint를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있다.
조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있다.
debugger 명령어
아래 예씨처럼 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다.
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- 여기서 실행이 멈춥니다.
say(phrase);
}debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄우 중단점을 설정하는 수고를 하지 않아도 된다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하다.
멈추면 보이는 것들
예시 페이지를 열면 함수 hello() 가 자동으로 호출된다. 중단점이 제대로 설정되어있는지 확인하고, 새로고침 단축키 F5나 Cmd+R키를 눌러 중단점을 작동시켜보자.
아래 그림과 같이 네 번째 줄에서 실행이 중단되는 것을 확인할 수 있다.
Watch– 표현식을 평가하고 결과를 보여준다.
Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
Call Stack– 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.
실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치한다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력된다.
콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가된다. 'anonymous’를 클릭해 직접 확인해 보자.
Scope– 현재 정의된 모든 변수를 출력한다.
Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있다.
Global은 함수 바깥에 정의된 전역 변수를 보여준다.
Local 하위 항목으로 this에 대한 정보도 출력되는데, 이에 대해선 추후에 학습하도록 하겠다.
console.log
console.log 함수를 이용하면 원하는 것을 콘솔에 출력할 수 있다.
아래 예시를 실행하면 콘솔창에 0부터 4까지 출력된다.
// 콘솔창을 열어 결과를 확인해 보세요.
for (let i = 0; i < 5; i++) {
console.log("숫자", i);
}
결과는 콘솔창에만 있기 때문에 일반 사용자는 결과를 볼 수 없다. 결과를 보려면 개발자 도구의 콘솔 패널을 직접 열거나 다른 패널이 열린 상태에서 Esc를 눌러 화면 하단에 콘솔 패널을 띄우면 된다.
코드에 console.log를 적절히 넣어주었다면 디버거 없이도 무슨 일이 일어나고 있는지 충분히 파악할 수 있으므로, console.log 함수와 디버거를 적절히 활용하길 바란다.
요약 ✔
스크립트 실행이 중단되는 경우는 다음과 같다.
1. 중단점을 만났을 때
2. debugger 문을 만났을 때
3. 에러가 발생했을 때(개발자 도구가 열려있고 '재생중단' 버튼이 활성화 되어있는 경우)
스크립트 실행이 중지되면 중단 시점을 기준으로 변수에 어떤 값이 들어가 있는지 확인할 수 있다. 또한 단계별로 코드를 실행해 가며, 어디서 문제가 발생했는지 추적할 수도 있다. 이런 식으로 디버깅이 진행된다.
