모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

Chrome으로 디버깅하기

디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 모던 브라우저와 호스트 환경 대부분은 새발자 도구 안에 UI 형태로 디버깅 툴을 구비해놓는다.

이 파트에서는 Chrome 브라우저에서 제공하는 디버깅 툴을 사용해볼 것이다.

Sources 패널

• Chrome을 사용해 예시 페이지를 연다.
• 개발자 도구를 연다. (MacOS 단축키 : cmd + opt + i)
• sources 탭을 클릭해 sources 패널을 연다.
• 토글 버튼을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일이 나열된다.
• hello.js 파일을 연다.

이렇게 하면 sources 패널은 다음 세가지 영역으로 나뉘어진다.

• 파일 탐색 영역 - 페이지를 구성하는 데 쓰이는 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)을 트리 형태로 보여준다. Chrome 익스텐션이 여기 나타낼 때도 있다.
• 코드 에디터 영역 - 리소스 영역에서 선택한 파일의 소스 코드를 보여준다. 소스 코드 편집도 가능하다.
• 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공한다.

콘솔

Esc를 누르면 개발자 도구 하단부에 콘솔 창이 열린다. 여기에 명령어를 입력하고 Enter를 누르면 입력한 명령어가 실행된다. 콘솔창에 구문(statement)를 입력하고 실행하면 아랫줄에 실행 결과가 출력된다.

중단점

hello.js를 소스 코드 영역에 띄우고 네번째 줄 코드 좌측의 줄 번호, 4를 클릭하면 중단점이 설정된다. 줄 번호 8도 클릭해 중단점을 하나 더 추가해보자.

중단점(breakpoint)은 자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다. 중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는 지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.

Sources 패널 우측의 디버깅 영역을 보면 중단점 목록을 확인할 수 있다. 파일 여러 개에 다수의 중단점을 설정해 놓은 경우 디버깅 영역을 이용하면 아래와 같은 작업을 할 수도 있다.

• 항목을 클릭해 해당 중단점이 설정된 곳으로 바로 이동할 수도 있다.
• 체크 박스 선택을 해제해 해당 중단점을 비활성화 할 수 있다.
• 마우스 오른쪽 버튼을 클릭했을 때 나오는 Remove breakpoint 옵션을 통해 중단점을 삭제할 수도 있다.

조건부 중단점

줄 번호에 커서를 옮긴 후 마우스 오른쪽 버튼을 클릭하면 조건부 중단점(conditional breakpoint)을 설정할 수 있다. Add conditional breakpoint을 클릭했을 때 뜨는 작은 창에 표현식을 입력하면 표현식이 참인 경우에만 실행을 중지시킬 수 있다.

조건부 중단점을 설정하면 변수에 특정 값이 할당될 때나 함수의 매개변수에 특정값이 들어올 때만 실행을 중단시킬 수 있어 디버깅시 유용하게 활용할 수 있다.

debugger 명령어

아래 예시처럼 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과가 있다.

function hello(name) {
  let phrase = 'Hello, ${name}!';
  debugger; // <-- 여기서 실행이 멈춘다.
  say(phrase);
}

debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 덜 수 있다.

멈추면 보이는 것들

예시 페이지를 열면 함수 hello()가 자동으로 호출된다. 중단점이 제대로 설정되어있는지 확인하고 페이지를 새로 고침해보자(MacOS 단축키 - cmd + r).

그럼 일단 네 번째 줄에서 실행이 중단되는 것을 확인할 수 있다.

• watch - 표현식을 평가하고 결과를 보여준다. Add Expression 버튼 +클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.
• Call Stack - 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다. 함수 hello 안에서 중단점을 설정했으므로 index.html 안에서 hello()를 호출하는 과정 중에 실행이 멈췄다. 따라서 콜 스택 최상단에는 hello가 위치하고 index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단에 anonymous가 출력된다. 콜 스택 내의 항목을 클릭하면 디버거가 해당 코드로 이동하고, 변수도 재평가 된다. 따라서 anonymous를 클릭하면 watch 내의 표현식 값그 시점으로 재평가된다.
• scope - 현재 정의된 모든 변수를 출력한다. Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인할 수 있다. Local 하위 항목으로 this에 대한 정보도 출력된다. Global은 함수 바깥에 정의된 전역 변수를 보여준다.

실행 추적하기

이제 본격적으로 실행 단계마다 어떤 일이 일어나는지 추적해보겠다. 먼저 디버깅 영역 상단에 있는 버튼들이 무슨 역할을 하는지 알아보자.

• Resume(F8): 스크립트 실행을 다시 시작 실행을 재개하며, 추가 중단점이 없는 경우에는 실행이 죽 이어지고 디버거는 작동하지 않고, 추가 중단점이 있을 때는 해당 중단점에서 실행이 멈춘다.
• Step(F9): 다음 명령어를 실행 다음 문을 실행한다. 클릭하면 alert 창이 뜨는 것을 확인할 수 있다. Step 버튼을 계속 누르면서 스크립트 전체를 문 단위로 하나하나 실행할 수가 있다.
• Step over(F10): 다음 명령어를 실행하되, 함수 안으로 들어가진 않음 Step은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춘다. 반면 Step over는 보이지 않는 곳에서 중첩 함수를 실행하긴 하나 함수 내로 진입하지 않는다. 실행은 함수 실행이 끝난 후에 즉시 멈춘다. Step over은 함수 호출시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다.
• Step into(F11): Step과 유사하지만 비동기 동작을 담당하는 코드로 진입하고 필요하다면 비동기 동작이 완료될 때까지 대기한다. Step은 비동기 동작을 무시한다.
• Step out(Shift+F11): 실행 중인 함수의 실행이 끝날 때까지 실행을 계속한다. 현재 실행 중인 함수의 실행을 계속 이어다가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 내부 동작을 알고 싶지 않은 중첩 함수로 진입했거나 가능한 한 빨리 함수 실행을 끝내고 싶은 경우에 유용하다.
• 모든 중단점을 활성화/빈활성화하는 버튼: 모든 중단점을 일시적으로 활성화/비활성화하며 실행에는 영향을 주지 않는다.
• 예외 발생시 코드를 자동 중지시켜주는 기능 활성화/비활성화하는 버튼: 항상 활성화되어있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 실행이 중단되므로 변수 등을 조사해서 왜 에러가 발생헀는지 찾을 수 있다. 개발하다가 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로 고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.

Continue to here 옵션

특정 줄에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴를 열면, Continue to here라는 옵션을 볼 수 있다. 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 아주 유용하다.

console.log

console.log 함수를 이용하면 원하는 것을 콘솔에서 출력할 수 있다.

for (let i = 0; i < 5; i++) {
  console.log("숫자", i);
}

결과는 콘솔창에만 있기 때문에 일반 사용자는 결과를 볼 수 없다. 결과를 보려면, 개발자 도구의 콘솔 패널을 직접 열거나 다른 패널이 열린 상태에서 Esc를 눌러 화면 하단에 콘솔 패널을 띄우면 된다.