모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
3.1. Chrome으로 디버깅하기
- 디버깅(debugging): 스크립트 내 에러를 검출해 제거하는 일련의 과정
- F12: 개발자 도구 여는 단축키
Source 패널
- 파일 탐색 영역: 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다. Chrome 익스텐션이 여기 나타날 때도 있다.
- 코드 에디터 영역: 리소스 영역에서 선택한 파일의 소스 코드를 보여준다. 여기서 소스 코드를 편집할 수도 있다.
- 자바스크립트 디버깅 영역: 디버깅에 관련된 기능을 제공한다.
콘솔
콘솔 창에 구문(statement)을 입력하고 실행하면 아랫줄에 실행 결과가 출력된다.
중단점(breakpoint)
breakpoint는 자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다. breakpoint를 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는 지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.
디버깅 영역을 이용하면 다음과 같은 작업을 할 수 있다.
- 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수 있다.
- 체크 박스 선택을 해제해 해당 중단점을 비활성화 할 수 있다.
- 마우스 오른쪽 버튼을 클릭했을 때 나오는 Remove breakpoint 옵션을 통해 중단점을 삭제할 수도 있다.
줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점(conditional breakpoint)을 설정할 수 있다. Add conditional breakpoint를 클릭했을 때 뜨는 작은 창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지시킬 수 있다. 조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개 변수에 특정 값이 들어올 때만 실행을 중단시킬 수 있어 디버깅 시 유용하게 활용할 수 있다.
debugger 명령어
스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다.
1
2
3
4
5
6
7
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- 여기서 실행이 멈춥니다.
say(phrase);
}
멈추면 보이는 것들
watch: 표현식을 평가하고 결과를 보여준다.Call Stack: 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다. 콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 휙 움직이고, 변수 역시 재평가된다.Scope: 현재 정의된 모든 변수를 출력한다.
실행 추적하기
- Resume: 스크립트 실행을 다시 시작함 (F8)
- Step: 다음 명령어를 실행한다. Step 버튼을 계속 누르면 스크립트 전체를 문 단위로 하나하나 실행할 수 있다. (F9)
- Step over: 다음 명령어를 실행하되, 함수 안으로 들어가진 않는다. (F10) 보이지 않는 곳에서 중첩 함수를 실행하긴 하지만 함수 내로 진입하지 않는다. 함수 호출 시 내부에서 어던 일이 일어나는지 궁금하지 않을 때 유용하다.
- Step into: Step은
setTimeout같은 비동기 동작은 무시한다. 반면 Step into는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다. (F11) Step out: 실행 중인 함수의 실행이 끝날 때까지 실행을 계속함
- Continue to here: 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 유용하다.