debugger.html 은 Mozilla 가 만든 새로운 JavaScript 디버거입니다. debugger.html 은 React 와 Redux 로 만든 웹 어플리케이션입니다. 이 프로젝트는 올해 초 Firefox Developer Tools 의 디버거를 교체하기 위해 시작됐습니다. 우리가 원한 것은 다양한 타겟(multiple targets)을 디버깅할 수 있고, 또 독립(standalone) 모드로도 동작할 수 있는 디버거였습니다.

현재, debugger.html 은 Firefox 타겟에 접속해서 디버깅할 수 있습니다. 뿐만아니라 실험적이긴 하지만 Chrome 과 Node 타겟에도 접속해서 디버깅할 수 있습니다. Firefox 타겟에 접속할 때는 Mozilla 의 Remote Debug Protocol (RDP) 을 사용하고 Node 와 Chrome 타겟에 접속할 때는 Chrome 의 RDP 를 사용합니다.

debugger.html 프로젝트는 GitHub 에서 관리되며 모던 프레임워크들과 툴체인들을 사용합니다. 그래서 많은 개발자들에게 유용하고 매력적일 것입니다.

debugger.html

사용자 인터페이스는 3개의 주요 부분(소스 패널, 에디터 패널, 오른쪽 사이드바)으로 나뉘어 있습니다.

• 소스 패널 은 현재 디버깅 중인 어플리케이션의 모든 소스를 트리 형태로 표시합니다.
• 에디터 패널 은 프로젝트 소스파일의 내용을 표시하는 데 쓰입니다. 브레이크포인트를 설정하고 소스를 보기 좋게 다듬어 표시하는 기능을 제공합니다.
• 오른쪽 사이드바 는 디버거로 어플리케이션의 실행을 정지시켰을 때, 브레이크포인트의 위치, 콜스택(call stack)의 상태, 현재 스코프(scope)의 변수들을 표시합니다.
  • 디버거는 JavaScript 디버깅을 위해 실행정지(pausing), 스텝오버(step over), 스텝인(step in), 스텝아웃(step out), 계속실행(play) 같은 제어기능을 지원합니다.
  • 콜스택(call stack) 패널 은 어플리케이션의 실행정지 상황에서 콜스택 프레임을 표시합니다. 그리고 스코프(scope) 패널은 선택된 프레임에 존재하는 변수 트리를 표시합니다. 변수 트리는 확장 가능합니다.

시작하기

지금 디버거를 사용하려면 GitHub 에서 코드를 다운로드 받고 시작하기 문서를 보아야 합니다.

곧바로 파고들고 싶다면 다음 명령을 실행시키세요.

npm install - 필요한 모듈들을 설치합니다
npm start - 개발용 웹서버를 시작합니다
open http://localhost:8000 - 브라우저에서 페이지를 오픈합니다

일단 브라우저로 8000번 포트에서 디버거를 열면 메인 디버거 페이지가 표시될 것입니다. 메인 디버거 페이지에서 디버깅 타겟을 선택할 수 있습니다. 디버깅 타겟에 연결해서 디버깅하려면 타겟의 리모트 디버깅 속성이 켜져있어야 합니다. 보통 이를 위해서는 타겟을 실행시킬 때 플랙을 한두 개 켜야 합니다. 예를 들어, MacOS 위에서 리모트 디버깅이 가능한 Firefox 타겟을 실행시키려면 아래와 같이 명령해야 합니다.

$ /Applications/Firefox.app/Contents/MacOS/firefox-bin
--start-debugger-server 6080 -P development

Chrome 과 Firefox 를 위한 기타 옵션들은 여기에서 찾아볼 수 있습니다.

Node 를 디버깅하려면 v6.3.0 이상 버전이 필요합니다. Node 타겟을 실행시킬 때는 inspect 플랙을 켜야 합니다. 예를 들어 myserver.js 를 디버깅하고 싶다면 다음과 같이 명령해야 합니다.

$ node --inspect myserver.js

시작하기 문서에서 보다 많은 정보를 볼 수 있습니다.

Firefox Developer Tools

우리는 이 디버거를 Firefox 의 Developer Tools에 통합하고 있습니다. 첫 번째 통합 결과물이 Nightly 버전에 반영되었습니다. Nightly 버전으로 결과물을 확인해 보세요.

참여하기

위에서 언급한 바와 같이 이 프로젝트는 아직 개발 중입니다. 최고의 디버거를 만드는데 당신이 참여해 준다면 기쁘겠습니다. 참여하기를 원한다면 참여하기 문서를 확인해 주세요.

이 글은 Bryan Clark 이 쓴 Introducing debugger.html 의 한국어 번역본입니다.