이 페이지는 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).

소스 창(Source pane)

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

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

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

  • line 19 일반적인 중단점입니다.
  • line 40 일반적인 중단점이며, 디버거가 일시정지된 부분입니다.
  • line 22 조건부 중단점입니다.

툴바(Toolbar)

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

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

중단점 목록(Breakpoint list)

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

 

 

호출 스택(Call stack)

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

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

범위(Scopes)

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

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

문서 태그 및 공헌자

이 페이지의 공헌자: toyuq
최종 변경: toyuq,