디버깅(Debugging)은 프로그램의 결함을 체계적으로 찾아내고 제거하는 과정입니다. 모든 것은 테스트 케이스 실행에서 시작됩니다. 테스트 케이스를 실행할 때마다 실제 결과와 기대 결과를 비교하게 되며, 두 결과 사이에 불일치가 발견되면 원인 분석을 수행하고 회귀 테스트(regression test)와 같은 추가 테스트를 진행해 결과가 예상한 방향과 일치하는지 확인합니다.
JavaScript 개발에서 디버깅이 중요한 이유
정적 웹 페이지를 만들 때는 HTML이 널리 사용됩니다. 반면 동적인 웹 애플리케이션을 개발하려면 웹의 스크립팅 언어인 JavaScript를 사용해야 합니다. 프로그래머는 코드를 버그 없이 유지하기 위해 다양한 디버깅 기법에 의존하는데, 이는 오류와 예외 상황을 미연에 방지하는 훌륭한 방법입니다. 그러나 JavaScript 자체에는 뛰어난 디버깅 기능이 내장되어 있지 않습니다. 다행히도 웹 브라우저 기반 디버거인 Firebug를 사용하면 JavaScript 코드를 손쉽게 디버깅할 수 있습니다.
Firebug 디버거의 주요 구성 요소
본격적으로 시작하기 전에 Firebug 디버거를 구성하는 핵심 요소들을 먼저 살펴보겠습니다.
- JSEditor – JSEditor는 JavaScript 편집기를 의미합니다. "Break on All Errors(모든 오류에서 중단)" 옵션을 사용해 JavaScript 코드를 디버깅할 수 있으며, 사용자는 이 옵션을 체크하기만 하면 스크립트 실행을 일시 중지할 수 있습니다.
- Script 탭 – Firebug 패널의 첫 번째 탭은 Console이고, 두 번째와 세 번째 탭은 각각 HTML과 CSS입니다. 네 번째가 Script 탭입니다. Script 패널은 두 개의 하위 패널로 나뉘는데, 왼쪽 패널은 JavaScript 편집기 역할을 하고 오른쪽 패널은 Watch와 Breakpoint라는 두 개의 하위 패널을 포함합니다.
- JSFileSelector – 현재 페이지에 포함된 모든 JavaScript 파일의 목록을 표시합니다.
- 중단점(Breakpoint) – JavaScript 실행은 중단점에서 멈춥니다. Firebug에는 정적(Static), 조건부(Conditional), 동적(Dynamic) 세 가지 종류의 중단점이 있습니다. 정적 중단점은 Script 패널에서 원하는 코드 줄을 클릭해 설정하고, 조건부 중단점은 이름 그대로 특정 조건에 따라 설정합니다. 함수 이름을 기준으로 중단점을 설정할 때는 동적 중단점을 활용할 수 있는데, 동적 중단점은 명령줄(command line)에서 직접 설정할 수 있다는 점이 매력적입니다. 또한 debug와 undebug라는 두 가지 널리 쓰이는 함수로도 설정할 수 있습니다.
- 중단점 목록 – 설정된 모든 중단점이 패널에 표시되며, 불필요한 중단점은 언제든 삭제할 수 있습니다.
- Watch 윈도우 – 'Watch 윈도우'는 Microsoft Visual Studio를 능숙하게 다루는 개발자라면 익숙한 용어입니다. 다만 Firebug의 Watch 윈도우와 Visual Studio의 Watch 윈도우 사이의 차이를 이해해두면 큰 도움이 됩니다. Firebug의 Watch 윈도우는 사용 가능한 변수들의 값을 목록 형태로 모두 보여주지만, 현재 스코프(scope) 안에 있는 변수 값만 표시됩니다. 반면 Microsoft Visual Studio의 Watch 윈도우는 사용자가 선택한 변수의 값만 표시합니다.
Firebug 애드온 설치 방법
- Mozilla Firefox 브라우저를 엽니다. 창 우측 상단에서 메뉴 열기(Open Menu) 버튼을 찾을 수 있습니다.
- 메뉴 열기를 클릭한 후 부가 기능(Add-ons)을 클릭합니다. 새 창이 나타납니다.
- 검색창에 Firebug를 입력하고 키보드의 Enter 키를 누릅니다.
- Firebug 애드온이 검색되면 설치(Install)를 클릭합니다.
이제 Firebug가 Firefox 브라우저에 성공적으로 추가되었습니다.
Firebug로 JavaScript 코드 디버깅하는 방법
다음은 FireBug를 사용해 Firefox에서 JavaScript 코드를 디버깅하는 8단계 절차입니다.
- JavaScript 코드를 메모장 파일에 작성하고 .htm 확장자로 저장합니다. 이 .htm 파일을 Firefox 브라우저로 열고, Firebug 디버거의 콘솔을 실행합니다.
- 원하는 코드 줄에 정적 중단점을 설정합니다. Script 탭의 오른쪽 패널에서 정적 중단점이 지정된 코드 줄을 확인할 수 있습니다.
- "Step Over" 버튼을 클릭해 코드를 한 줄씩 실행합니다. 이 버튼은 Firebug 도구 모음에 있습니다. Step Over 외에 Continue, Step Into, Step Out 세 가지 버튼도 함께 제공됩니다. 중단점에 도달한 후 스크립트 실행을 재개하려면 Continue를 클릭하거나 F8 키를 누릅니다. 특정 함수 호출을 건너뛰려면 Step Over를 클릭하거나 F10 키를 누르고, 특정 함수 본문 내부로 들어가려면 Step Into를 클릭하거나 F11 키를 누릅니다. 스크립트 실행을 재개한 후 다음 중단점에서 멈추려면 Step Out을 클릭합니다.
- Watch 윈도우에 표시되는 변수 값들을 꼼꼼히 살펴봅니다.
- 필요한 조치를 취합니다. 버그를 식별하고 수정합니다.
- Firefox의 새로 고침 버튼을 클릭해 페이지를 다시 로드합니다. 대신 Ctrl+R 키 조합을 눌러도 됩니다.
- 대부분의 변수 값은 Watch 윈도우에 표시되지만, 한두 개의 변수 값이 누락될 수도 있습니다. 이럴 때는 CommandLine API를 활용해 보세요. 특정 함수의 첫 번째 줄에 중단점을 추가하려면 debug(fn)을, 해당 함수 첫 줄의 중단점을 제거하려면 undebug(fn)을 사용합니다.
- 버그를 수정한 후 코드를 다시 실행합니다. 여전히 버그가 남아 있다면 위의 7단계를 반복해 디버깅을 진행합니다. 마지막으로 파일을 저장하고 Firefox에서 미리 보기로 최종 확인합니다.
프로그래머에게 버그 수정은 악몽과 같은 작업이지만, Firebug의 강력한 기능을 활용하면 이러한 부담을 크게 덜 수 있습니다. Firebug만 있으면 디버깅이 한결 수월해집니다.
참고: Firebug는 2017년 공식적으로 개발이 종료되었으며, 핵심 기능들은 Firefox 개발자 도구(Firefox DevTools)에 통합되었다. 최신 버전의 Firefox에서는 F12 키로 열 수 있는 내장 개발자 도구를 사용하는 것이 좋다.