좀 더 복잡한 코드를 작성하기 전에, 디버깅이란 것에 대해 이야기해봅시다.
디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다. 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓습니다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다.
이 글에선 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다. 기능이 다양하고, Chrome에 익숙해지면 다른 브라우저에서 지원하는 디버깅 툴은 쉽게 익힐 수 있기 때문입니다.
‘Sources’ 패널
Chrome 버전에 따라 보이는 화면은 약간씩 다를 수 있습니다. 하지만 버전이 바뀌어도 구성은 크게 바뀌지 않기 때문에 화면 캡쳐본과 함께 설명을 이어나가겠습니다.
- Chrome을 사용해 예시 페이지를 엽니다.
- F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 엽니다.
Sources탭을 클릭해Sources패널(panel)을 엽니다.
Sources 패널을 처음 열었다면 아래와 같은 화면이 보일 겁니다.
토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열됩니다.
파일 목록에서 hello.js를 클릭해 아래와 같이 화면을 바꿔봅시다.
Sources 패널은 크게 세 개의 영역으로 구성됩니다.
- 파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줍니다. Chrome 익스텐션이 여기 나타날 때도 있습니다.
- 코드 에디터 영역 – 리소스 영역에서 선택한 파일의 소스 코드를 보여줍니다. 여기서 소스 코드를 편집할 수도 있습니다.
- 자바스크립트 디버깅 영역 – 디버깅에 관련된 기능을 제공합니다. 곧 자세히 살펴보겠습니다.
토글 버튼 을 다시 누르면 리소스 영역이 사라지고, 소스 코드 영역이 더 넓어집니다.
콘솔
Esc를 누르면 개발자 도구 하단부에 콘솔 창이 열립니다. 여기에 명령어를 입력하고 Enter를 누르면 입력한 명령어가 실행됩니다.
콘솔 창에 구문(statement)을 입력하고 실행하면 아랫줄에 실행 결과가 출력됩니다.
1+2를 입력하면 3이 출력되고, hello("debugger")를 입력하면 undefined가 출력되죠. undefined가 출력되는 이유는 hello("debugger")가 아무것도 반환하지 않기 때문입니다.