UI Tour

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면, Debugger (before Firefox 52)를 참조하세요.

이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을 false로 설정하여 수행 할 수 있습니다.

이 문서는 JavaScript 디버거의 사용자 인터페이스의 주요 섹션을 간략히 설명합니다. UI는 세로로 세 개의 패널로 나뉩니다.

소스 목록 창(Source list pane)

소스 목록 창은 페이지에 로드 된 모든 JavaScript 소스 파일을 나열하고 디버깅 할 소스 파일을 선택할 수 있게 합니다. 최상위 레벨 소스는 원점별로 구성되며, 그 아래에서 소스가 제공되는 디렉토리 구조에 따라 구성됩니다.

파일을 찾기 위해서 Ctrl + P 단축키를 사용할 수 있습니다. (맥에서는 Cmd + P).

현재 로드 된 JavaScript 파일을 표시합니다.

소스 창에 초점이 맞춰지면 Ctrl + F를 사용해서 파일에서 문자열을 검색할 수 있습니다. (맥에서는 Cmd + F ).

중단점에는 라인번호에 파란색 화살표가 있습니다. 조건부 중단점에서는 주황색 화살표가 있습니다. 중단점에서 멈추는 경우, 해당 라인은 초록색이 됩니다. 스크린샷에서 세가지 중단점을 확인할 수 있습니다 :

툴바는 오른쪽 상단에 있습니다 :

툴바는 다음과 같이 구성되어 있습니다:

스크립트를 통해 디버거를 제어하는 네 개의 버튼입니다 :
- 계속(Play)/정지(pause) (F8): 디버깅 중인 스크립트를 중지시키거나 다시 시작합니다. '계속'아이콘이 표시되면 일시중지인 상태이거나 중단점에서 멈춘 경우입니다.
- 다음줄 실행(Step over) (F10): 현재의 Javascript 코드의 행을 넘어갑니다..
- 함수 안으로(Step in) (F11): 현재의 JavaScript 코드의 행에서 함수를 실행합니다.
- 함수 밖으로(Step out) (Shift-F11): 현재의 함수가 종료될 때까지 스크립트를 실행합니다.
예외 무시(Ignore exceptions)버튼은 세 가지 기능으로 사용할 수 있습니다. (1) 예외를 무시합니다, (2) 잡히지 않은 예외에서 멈춥니다, 혹은 (3) 모든 예외에서 멈춥니다.

툴바 아래에 설정한 모든 중단점을 볼 수 있습니다. 각 중단점을 체크박스를 선택하여 활성화/비활성화를 할 수 있습니다:

디버거가 일시 중지되면 호출 스택이 표시됩니다:

호출 스택의 각 레벨에는 함수 이름과 파일 이름 및 줄 번호가 있습니다. 호출스택 목록를 클릭하면 소스 창(source pane)에서 해당 소스가 열립니다.

오른쪽 창에 옆에 공개 화살표가있는 레이블 "범위"가 표시됩니다. 디버거가 일시 중지되면이 섹션을 확장하여 프로그램의이 시점에서 범위에있는 모든 개체를 볼 수 있습니다.:

객체는 범위별로 구성됩니다. 가장 많은 부분이 먼저 나타나고 전역 범위 (Window, 페이지 스크립트인 경우)가 마지막에 나타납니다.