개발자라면 코드를 디버깅해야 할 일이 매우 자주 생깁니다. 이미 여러 과제를 진행하면서 console.log를 사용해 보셨을 텐데요, 이것이 가장 간단한 디버깅 방법입니다.
이 글에서는 브라우저에 기본으로 내장된 디버깅 도구를 활용해 코드를 효율적으로 분석할 수 있는 가장 유용한 트릭들을 소개합니다.
FreeCodeCamp 코드 에디터의 숨은 비밀
본격적인 디버깅에 앞서, FCC(FreeCodeCamp)의 강력한 코드 검사 엔진에 대해 알아두면 좋은 사실 몇 가지를 짚고 넘어가겠습니다.
FCC는 커스터마이징된 CodeMirror를 코드 에디터로 사용합니다. 에디터에 입력된 문자열 형태의 JavaScript 코드는 eval() 함수를 통해 평가되는데, eval()이 호출되면 브라우저는 네이티브 방식으로 여러분의 코드를 그대로 실행합니다. 이 비밀이 왜 중요한지는 글의 뒷부분에서 자세히 설명하겠습니다.
바로 디버깅 트릭 살펴보기
Google Chrome은 V8이라는 자체 JavaScript 엔진을 탑재한 가장 인기 있는 브라우저 중 하나로, 개발자를 위한 강력한 도구 세트인 Chrome DevTools를 제공합니다. 공식 JavaScript 디버깅 가이드를 함께 읽어보시는 것도 큰 도움이 됩니다.
1. DevTools 기본기 익히기
Chrome DevTools 실행 방법
F12 키를 누르면 됩니다. Windows와 Linux에서는 Ctrl + Shift + I, Mac에서는 Cmd + Shift + I를 눌러도 됩니다. 마우스를 선호한다면 메뉴 > 도구 더보기 > 개발자 도구로 이동하세요.
Sources 탭과 console 탭 이해하기
이 두 탭은 디버깅할 때 가장 자주 사용하게 될 핵심 도구입니다. Sources 탭에서는 현재 방문 중인 웹페이지의 모든 스크립트를 시각적으로 확인할 수 있으며, 코드 창, 파일 트리, 콜 스택(Call Stack), 감시(Watch) 창 등의 섹션으로 구성되어 있습니다.
console 탭에는 모든 로그 출력이 표시됩니다. 또한 콘솔 프롬프트에 JavaScript 코드를 직접 입력해 즉시 실행할 수도 있는데, Windows의 명령 프롬프트나 Linux의 터미널과 비슷한 역할이라고 생각하면 됩니다.
팁: DevTools 화면에서 Esc 키를 누르면 언제든 콘솔을 열었다 닫았다 할 수 있습니다.
2. 자주 쓰는 단축키와 기능
전체 단축키 목록을 참고할 수도 있지만, 실무에서 가장 많이 사용되는 핵심 단축키는 아래와 같습니다.
| 기능 | Windows / Linux | Mac |
|---|---|---|
| 키워드 검색 (정규식 지원) | Ctrl + F | Cmd + F |
| 파일 검색 후 열기 | Ctrl + P | Cmd + P |
| 특정 줄로 이동 | Ctrl + G + :줄번호 | Cmd + G + :줄번호 |
| 중단점(Breakpoint) 추가 | Ctrl + B 또는 줄 번호 클릭 | Cmd + B 또는 줄 번호 클릭 |
| 스크립트 실행 일시중지 / 재개 | F8 | F8 |
| 다음 함수 호출 건너뛰기 (Step over) | F10 | F10 |
| 다음 함수 호출 내부로 진입 (Step into) | F11 | F11 |
3. Source Map으로 동적 스크립트 디버깅하기
가장 흥미로운 기능 중 하나는 Source Map을 활용해 동적 스크립트를 실시간으로 디버깅하는 것입니다.
모든 스크립트는 DevTools의 Sources 탭에서 확인할 수 있으며, 이곳에는 웹페이지의 모든 JavaScript 소스 파일이 표시됩니다. 하지만 코드 에디터의 코드는 브라우저 프로세스 내부의 VM(Virtual Machine)이라 불리는 컨테이너 안에서 eval()을 통해 실행됩니다.
눈치채셨겠지만, 우리가 작성한 코드는 사실상 파일 이름이 없는 스크립트입니다. 그렇기 때문에 Sources 탭에는 아무것도 나타나지 않습니다.
여기서 핵심 트릭이 등장합니다!
Source Maps를 활용하면 에디터에서 작성한 JavaScript에 가상의 파일 이름을 부여할 수 있습니다. 방법은 아주 간단합니다.
예를 들어 Factorialize 과제를 풀고 있고 코드가 다음과 같다고 가정해 보겠습니다.
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
코드 맨 첫 줄에 //# sourceURL=factorialize.js 한 줄만 추가하면 됩니다.
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
이것으로 끝입니다!
이제 DevTools를 열고 지정한 파일 이름을 검색해 보세요. 원하는 위치에 중단점을 설정하고 마음껏 디버깅을 즐기시면 됩니다!
디버깅 관련 추가 학습 자료
- 초보자를 위한 버그 잡기 입문 가이드
- 초보자를 위한 디버깅 팁과 트릭
- 브라우저 디버깅 콘솔 100% 활용하기
freeCodeCamp는 무료 코딩 학습을 제공하며, 오픈소스 커리큘럼을 통해 이미 4만 명 이상의 사람들이 개발자로 취업하는 데 성공했습니다. 지금 바로 학습을 시작해 보세요!