---
title: UI Tour
slug: Tools/Debugger/UI_Tour
translation_of: Tools/Debugger/UI_Tour
---
<div>{{ToolsSidebar}}</div><div class="note">
<p><span id="result_box" lang="ko"><span>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.</span></span></p>

<p>이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면, <a href="https://developer.mozilla.org/ko/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a>를 참조하세요.</p>

<p><span id="result_box" lang="ko"><span>이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여  "devtools.debugger.new-debugger-frontend"환경 설정을 </span></span><code>false</code><span lang="ko"><span>로 설정하여 수행 할 수 있습니다.</span></span></p>
</div>

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

<ul>
 <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_목록_창(Source_list_pane)">소스 목록 창(Source list pane)</a></li>
 <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(Source pane)</a></li>
 <li>세 번째 패널은 4개의 섹션으로 나뉩니다 :
  <ul>
   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#툴바(Toolbar)">툴바(Toolbar)</a></li>
   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#중단점_목록(Breakpoint_list)">중단점 목록(Breakpoints list)</a></li>
   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#호출_스택(Call_stack)">호출 스택(Call stack)</a></li>
   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#범위(Scopes)">범위(Scopes)</a></li>
  </ul>
 </li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/14977/debugger-screen-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>

<h2 id="소스_목록_창Source_list_pane">소스 목록 창(Source list pane)</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14975/debugger-source-list-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>

<p> <a href="/ko/docs/Tools/Debugger/How_to/Search#파일_찾기">파일을 찾기 위해서</a> <kbd>Ctrl</kbd> + <kbd>P</kbd> 단축키를 사용할 수 있습니다. (맥에서는 <kbd>Cmd</kbd> + <kbd>P</kbd>).</p>

<h2 id="소스_창Source_pane">소스 창(Source pane)</h2>

<p>현재 로드 된 JavaScript 파일을 표시합니다.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14973/debugger-source-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">소스 창에 초점이 맞춰지면 <kbd>Ctrl</kbd> + <kbd>F</kbd>를 사용해서 <a href="/ko/docs/Tools/Debugger/How_to/Search#파일_내에서_찾기">파일에서 문자열을 검색할 수 있습니다.</a>  (맥에서는 <kbd>Cmd</kbd> + <kbd>F</kbd> ).</p>

<p><a href="/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint">중단점에는</a> 라인번호에 파란색 화살표가 있습니다. <a href="/ko/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">조건부 중단점에서는</a> 주황색 화살표가 있습니다. 중단점에서 멈추는 경우, 해당 라인은 초록색이 됩니다. 스크린샷에서 세가지 중단점을 확인할 수 있습니다 :</p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14981/debugger-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>

<h2 id="툴바Toolbar"><a name="toolbar">툴바(Toolbar)</a></h2>

<p>툴바는 오른쪽 상단에 있습니다 :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14971/debugger-toolbar-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>

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

<ul>
 <li><a href="/ko/docs/Tools/Debugger/How_to/Step_through_code">스크립트를 통해 디버거를 제어하는 </a>네 개의 버튼입니다<a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code"> </a>:

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14979/debugger-toolbar-zoom-2.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 536px;"></p>

<h2 id="중단점_목록Breakpoint_list">중단점 목록(Breakpoint list)</h2>

<p>툴바 아래에 설정한 모든 중단점을 볼 수 있습니다. 각 중단점을 체크박스를 선택하여 <a href="/ko/docs/Tools/Debugger/How_to/Disable_breakpoints">활성화/비활성화</a>를 할 수 있습니다:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14969/debugger-breakpoints-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>

<p> </p>

<p> </p>

<h2 id="호출_스택Call_stack">호출 스택(Call stack)</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14967/debugger-call-stack-2.png" style="display: block; height: 1138px; margin-left: auto; margin-right: auto; width: 1113px;">호출 스택의 각 레벨에는 함수 이름과 파일 이름 및 줄 번호가 있습니다. 호출스택 목록를 클릭하면 소스 창(source pane)에서 해당 소스가 열립니다.</p>

<h2 id="범위Scopes">범위(Scopes)</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14965/debugger-scopes-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">객체는 범위별로 구성됩니다. 가장 많은 부분이 먼저 나타나고 전역 범위 (Window, 페이지 스크립트인 경우)가 마지막에 나타납니다.</p>