1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
---
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>
|
