---
title: Firefox 개발자 도구
slug: Tools
tags:
  - 가이드
  - 개발 도구
  - 개발자 에디션
  - 개발자버전
  - 디버그
  - 웹개발
  - 웹애플리케이션
  - 웹페이지
  - 자바스크립트
  - 파이어폭스
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>

<div class="summary"><span class="seoSummary">HTML과 CSS, Javascript를 데스크탑이나 모바일에서 확인하거나 편집, 디버깅 합니다.</span></div>

<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Developer Edition 설치 하기</a>

<div class="summary">
<h3 id="Whats_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Firefox Developer Edition에 새로 추가된 기능</h3>

<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>은 가장 최신 버전의 Firefox 기능과 함께, 실험 중인 개발자 도구로 개발자분들에게 맞춤 제작된 Firefox 버전을 제공해드립니다. 현재 Developer Edition은 다음과 같은 기능 업데이트를 포함하고 있습니다.</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_43">New animation inspector UI</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Server">Server logging in the Web Console</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Quickly find the rule that overrode a CSS declaration</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Use in Console" context menu item in Inspector</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">"Strict" option for filtering in the Rules view</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Network">Network entries in the Console now link to the Network Monitor</a></li>
 <li><span class="author-g-1scq3ywqbljc5puc">New sidebar UI for WebIDE</span></li>
</ul>
</div>
</div>

<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">아이디어 공유하기</a>

<div class="summary">
<h3 id="Share_your_ideas" name="Share_your_ideas">여러분들의 생각을 알려주세요</h3>

<p>개발자 도구에 새 기능을 제안하거나 다른 개발자가 제안한 아이디어에 투표하세요.</p>
</div>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>

<div class="column-container">
<div class="column-half">
<h2 id="Creating" name="Creating">만들기</h2>

<p>웹사이트나 웹 애플리케이션을 위한 저작 도구입니다.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Scratchpad">스크래치 패드</a></dt>
 <dd>자바스크립트를 작성하고 실행해볼 수 있는 Firefox에 내장 편집기입니다.</dd>
 <dt><a href="/en-US/docs/Tools/Style_Editor">스타일 편집기</a></dt>
 <dd>현재 페이지의 CSS 스타일을 보거나 편집합니다.</dd>
 <dt><a href="/en-US/docs/Tools/Shader_Editor">셰이더 에디터</a></dt>
 <dd><a href="/en-US/docs/Web/WebGL">WebGL</a>이 사용하는 버텍스나 부분 셰이더를 열어보고 편집합니다.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">웹 오디오 편집기</a></dt>
 <dd>오디오 컨텍스트에 있는 오디오 노드 그래프를 검사하거나 매개변수를 수정합니다.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Exploring" name="Exploring">탐색 및 디버깅</h2>

<p>웹사이트나 웹 애플리케이션을 검사하고, 탐색하거나 디버깅 합니다.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Web_Console">웹 콘솔</a></dt>
 <dd>웹 페이지의 로그 메세지를 확인하거나, 자바스크립트를 사용하여 페이지와 상호 작용합니다.</dd>
 <dt><a href="/en-US/docs/Tools/Page_Inspector">페이지 검사기</a></dt>
 <dd>페이지의 HTML과 CSS를 보거나 수정할 수 있습니다.</dd>
 <dt><a href="/en-US/docs/Tools/Debugger">JavaScript 디버거</a></dt>
 <dd>페이지의 JavaScript 실행을 멈추거나, 단계별로 검사 혹은 수정할 수 있습니다.</dd>
 <dt><a href="/en-US/docs/Tools/Network_Monitor">네트워크 모니터</a></dt>
 <dd>페이지를 로드 할 때 어떤 네트워크 요청이 일어나는지 확인하세요.</dd>
 <dt><a href="/en-US/docs/Tools/Storage_Inspector">저장소 검사기</a></dt>
 <dd>페이지에 존재하는 쿠키, 로컬 저장소, indexedDB 및 세션 저장소를 검사합니다.</dd>
 <dt><a href="/en-US/docs/Tools/GCLI">개발자 도구 모음</a></dt>
 <dd>개발자 도구를 위한 커맨드라인 인터페이스입니다.</dd>
 <dt><a href="/en-US/docs/Tools/3D_View">3D View</a></dt>
 <dd><span class="short_text" id="result_box" lang="ko"><span class="atn hps">페이지를 3차원 시각화하여 보여줍니다.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Eyedropper">점안기 | Eyedropper</a></dt>
 <dd>페이지에서 색상을 선택하세요.</dd>
 <dt><a href="/en-US/docs/Tools/Working_with_iframes">iframe 선택하기</a></dt>
 <dd>컨텐츠가 어떤 iframe에서 표시될지 결정하세요.</dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Mobile" name="Mobile">모바일</h2>

<p>모바일 개발을 위한 도구입니다.</p>

<dl>
 <dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">App 매니저</a></dt>
 <dd>Firefox OS용 애플리케이션을 설계하고 개발하세요.</dd>
 <dt><a href="/en-US/docs/Tools/WebIDE">웹 IDE</a></dt>
 <dd>App 매니저를 Firefox 33 이후로 계속 사용할 수 있도록 한 대체품입니다.</dd>
 <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 시뮬레이터</a></dt>
 <dd>Firefox OS가 설치된 디바이스 없이도 데스크탑에서 Firefox OS용 애플리케이션을 실행하고 디버깅할 수 있습니다.</dd>
 <dt><a href="/en-us/docs/Tools/Responsive_Design_View">반응형 디자인 보기</a></dt>
 <dd>브라우저 창의 크기를 변경하지 않고도 여러분의 웹사이트나 애플리케이션이 다른 크기의 스크린에서 어떻게 보이는지 확인할 수 있습니다.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Android용 Firefox에서 디버깅</a></dt>
 <dd>Android에서 Firefox와 연결하여 디버깅 할 수 있는 개발 도구입니다.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Android용 Firefox에서 웹 IDE로 디버깅</a></dt>
 <dd>데스크탑용 Firefox 36, Android용 Firefox 35 이상에서 더 간편하게 디버깅할 수 있습니다.</dd>
 <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
 <dd>iOS의 Safari와 Android의 Chrome에 연결하여 디버깅 할 수 있는 개발 도구입니다.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Performance" name="Performance">성능</h2>

<p>성능 문제를 진단하고, 개선합니다.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Performance">성능 도구 | Performance tool</a></dt>
 <dd>개선된 Javascript 프로파일러와 프레임율 타임라인을 제공합니다.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate">프레임율 그래프</a></dt>
 <dd>당신의 사이트의 프레임율 보기.</dd>
</dl>

<dl>
 <dt></dt>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">워터폴</a></dt>
 <dd>어떤 브라우저가 사이트에서 무슨일을 하고 있는지 알아보기.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">콜 트리</a></dt>
 <dd>당신의 Javascript 코드가 어디에서 시간을 소비하고 있는지 알아보기.</dd>
 <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing 도구</a></dt>
 <dd>이벤트를 통해 페이지가 업데이트 된 부분을 눈에 띄게 표시해 주는 도구입니다.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">리플로우 이벤트 로깅</a></dt>
 <dd>웹 콘솔에서 페이지의 리플로우 이벤트가 발생했는지 확인할 수 있습니다.</dd>
 <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">네트워크 성능 | Network Performance</a></dt>
 <dd>페이지가 로딩될 때 많은 시간이 소요되는 부분을 점검하세요.</dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser">브라우저 디버깅하기</h2>

<p>보통의 경우, 개발자 도구는 웹 페이지나 웹 애플리케이션을 디버깅 하지만 브라우저에 연결하여 브라우저나 애드온 프로그램 개발에 유용하게 사용할 수도 있습니다.</p>

<dl>
 <dt><a href="/ko/docs/Tools/Browser_Console">브라우저 콘솔</a></dt>
 <dd>브라우저나 애드온 프로그램에서 발생한 로그 메시지를 확인하세요. 페이지에서 직접 Javascript 코드를 실행할 수도 있습니다.</dd>
 <dt><a href="/ko/docs/Tools/Browser_Toolbox">브라우저 도구 박스</a></dt>
 <dd>브라우저에 개발자 도구를 추가하세요.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">개발자 도구 확장하기</h2>

<p>개발자 도구는 확장이 용이하도록 디자인 되었습니다. Firefox 애드온은 기존의 도구를 확장하거나 새로운 도구를 추가하기 위한 컴포넌트 및 개발자 도구를 다룰 수 있으며, 원격 디버깅 프로토콜을 통해 여러분만의 도구를 사용해 웹사이트를 디버깅하거나, 혹은 Firefox에서 다른 디바이스를 디버깅하는 여러분만의 클라이언트나 서버를 구현할 수도 있습니다.</p>

<dl>
 <dt><a href="https://developer.mozilla.org/ko/docs/Tools/Adding_a_panel_to_the_toolbox">개발자 도구 화면에서 새 패널 추가하기</a></dt>
 <dd>개발자 도구 화면에서 새 패널을 추가하는 애드온을 만들어 보세요.</dd>
</dl>

<dl>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">원격 디버깅 프로토콜</a></dt>
 <dd>원격 디버깅 프로토콜은 Firefox 개발자 도구가 Firefox나 Firefox OS 장치로 연결할 수 있게 해줍니다.</dd>
 <dt><a href="/ko/docs/Tools/Editor">소스 편집기</a></dt>
 <dd>여러분이 개발한 애드온 프로그램에 Firefox 코드 편집기를 내장할 수 있습니다.</dd>
 <dt><a href="https://developer.mozilla.org/ko/docs/Tools/Debugger-API">디버거 인터페이스</a></dt>
 <dd>작성한 자바스크립트 코드의 실행 결과를 관찰할 수 있는 API입니다. Firefox 개발자 도구는 이 API를 사용해서 Javascript 디버거를 만들었습니다.</dd>
 <dt><a href="/ko/docs/Tools/Web_Console/Custom_output">웹 콘솔 출력 커스터마이징</a></dt>
 <dd><a href="/ko/docs/Tools/Browser_Console">브라우저 콘솔</a>과 <a href="/ko/docs/Tools/Web_Console">웹 콘솔</a>을 커스터마이징 하는 방법을 알아보세요.</dd>
 <dt><a href="https://developer.mozilla.org/ko/docs/Tools/Example_add-ons">개발자 도구 애드온 예제</a></dt>
 <dd>예제를 활용하여 개발자 도구 애드온 프로그램이 어떻게 만들어지는지 이해해 보세요.</dd>
</dl>
</div>
</div>

<hr>
<h2 id="More_resources" name="More_resources">다른 리소스</h2>

<p>이 섹션의 리소스들은 Mozilla 개발자 도구 팀에서 제공하는 것이 아니지만 웹 개발자들에게 잘 알려진 것들이며, 이 중에는 Firefox 애드온 프로그램에 포함된 것도 있습니다. 전체 목록을 보려면 <a href="https://addons.mozilla.org/ko/firefox/extensions/web-development/">addons.mozilla.org 사이트의 "Web Developer" 카테고리</a>를 확인하세요.</p>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
 <dd>아주 유명하고 강력한 웹 개발 도구이며, 자바스크립트 디버거와 HTML과 CSS 뷰어, 네트워크 모니터를 포함합니다.</dd>
 <dt><a href="/ko/docs/DOM_Inspector">DOM 검사기</a></dt>
 <dd>웹 페이지의 DOM이나 XUL 윈도우를 탐색하고 편집하며, 점검해 볼 수 있는 도구입니다.</dd>
 <dt><a href="https://addons.mozilla.org/ko/firefox/addon/web-developer/">웹 개발자</a></dt>
 <dd>다양한 웹 개발 도구를 브라우저의 메뉴나 툴바에 추가하세요.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="https://webmaker.org/ko/tools/">웹메이커 도구</a></dt>
 <dd>Mozilla에서 웹 개발을 시작하는 사람들을 위해 만든 도구들을 모아 두었습니다.</dd>
 <dt><a href="http://www.w3.org/Status.html">W3C 검사기</a></dt>
 <dd>W3C 웹사이트는 여러분의 <a href="http://validator.w3.org/">HTML</a>과 <a href="http://jigsaw.w3.org/css-validator/">CSS</a>를 포함한 웹사이트 정합성을 확인하는 여러 도구들을 제공하고 있습니다.</dd>
 <dt><a href="http://www.jshint.com/">JSHint</a></dt>
 <dd>JavaScript 코드 분석 도구입니다.</dd>
</dl>
</div>
</div>