diff options
Diffstat (limited to 'files/ko/tools')
21 files changed, 1422 insertions, 0 deletions
diff --git a/files/ko/tools/add-ons/dom_inspector/index.html b/files/ko/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..d84e82b45e --- /dev/null +++ b/files/ko/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,16 @@ +--- +title: DOM Inspector +slug: Tools/Add-ons/DOM_Inspector +tags: + - 'DOM:Tools' + - 'Extensions:Tools' + - 'Themes:Tools' + - 'Web Development:Tools' + - 'XUL:Tools' +translation_of: Tools/Add-ons/DOM_Inspector +--- +<div>{{ToolsSidebar}}</div><p><strong>DOMi</strong>로도 알려진 <strong><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a></strong>는 문서 - 보통 웹 페이지 또는 <a href="ko/XUL">XUL</a> windows - 의 <a href="ko/DOM">Document Object Model</a>을 검증, 검색, 편집하는데 사용되는 Mozilla 도구입니다.</p> + +<p>DOMi에 대한 더 많은 정보를 위해서는 <a class="external" href="http://kb.mozillazine.org/DOM_Inspector">DOM Inspector page at MozillaZine</a>를 보십시오.</p> + +<p>{{ languages( { "en": "en/DOM_Inspector" } ) }}</p> diff --git a/files/ko/tools/add-ons/index.html b/files/ko/tools/add-ons/index.html new file mode 100644 index 0000000000..24ffbe79e9 --- /dev/null +++ b/files/ko/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div><p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p> + +<dl> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> + <dd>Examine the data exchanged in a WebSocket connection.</dd> + <dd> </dd> +</dl> diff --git a/files/ko/tools/debugger/index.html b/files/ko/tools/debugger/index.html new file mode 100644 index 0000000000..9f5cb7c25c --- /dev/null +++ b/files/ko/tools/debugger/index.html @@ -0,0 +1,85 @@ +--- +title: 디버거 +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div><p>자바스크립트 디버거는 당신이 자바스크립트 코드를 단계별로 통과하는 것을 가능하게 하고 코드의 버그들을 찾는 것을 돕기 위해 상태를 검사 하거나 수정할 수 있도록 해줍니다.</p> + +<p>파이어폭스에서 코드를 디버그 하기 위해 지역적으로 혹은 원격으로 디버거를 사용할 수 있습니다. 예를 들어, 파이어폭스 OS 장치 혹은 안드로이드용 파이어폭스를 원격으로 디버깅 할 수 있습니다. <a href="/ko/docs/Tools/Remote_Debugging">원격 디버깅 </a>을 확인해보면 원격 타겟에 디버거를 연결하는 방법을 배울 수 있습니다.</p> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<hr> +<h2 id="사용자_인터페이스_투어">사용자 인터페이스 투어</h2> + +<p>디버거에 대해서 알아보려면, <a href="/ko/docs/Tools/Debugger/UI_Tour">UI 퀵 투어</a> 를 통해 알 수 있습니다.</p> + +<hr> +<h2 id="방법">방법</h2> + +<p><span class="short_text" id="result_box" lang="ko"><span>디버거를 사용하여 수행 할 수있는 작업을 확인하려면 다음 사용 설명서를 참조하십시오</span></span> :</p> + +<p> </p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Open_the_debugger">디버거 열기</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint">중단점 설정</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Disable_breakpoints">중단점 비활성화</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Step_through_code">단계별 코드 수행</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">DOM 이벤트에 브레이크</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">DOM 노드들에 표시하고 조사</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">간소화(Minified)된 파일 예쁘게 출력</a></dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Search">검색과 필터</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">조건부 중단점 설정</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">검사, 수정, 그리고 변수들 관찰</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Use_a_source_map">소스맵 사용</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Black_box_a_source">특정 소스에 대해 블랙박스화 하기</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Debug_eval_sources">eval 소스코드 디버그</a></dt> + <dd> </dd> + <dt><a href="/ko/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">에드온에서 디버깅 접근</a></dt> + <dd> </dd> +</dl> +</div> +</div> + +<p> </p> + +<hr> +<h2 id="참조">참조</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Debugger/Keyboard_shortcuts">키보드 단축키</a></dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Debugger/Settings">설정</a></dt> + <dd> </dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/ko/tools/debugger/ui_tour/index.html b/files/ko/tools/debugger/ui_tour/index.html new file mode 100644 index 0000000000..8f6af21ba1 --- /dev/null +++ b/files/ko/tools/debugger/ui_tour/index.html @@ -0,0 +1,98 @@ +--- +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> diff --git a/files/ko/tools/debugger/단축키/index.html b/files/ko/tools/debugger/단축키/index.html new file mode 100644 index 0000000000..d213621412 --- /dev/null +++ b/files/ko/tools/debugger/단축키/index.html @@ -0,0 +1,10 @@ +--- +title: 디버거 단축키 +slug: Tools/Debugger/단축키 +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{ Page ("ko/docs/tools/Keyboard_shortcuts", "debugger") }}</p> + +<h2 id="공통_단축키">공통 단축키</h2> + +<p>{{ Page ("ko/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/ko/tools/how_to/index.html b/files/ko/tools/how_to/index.html new file mode 100644 index 0000000000..40f5269f45 --- /dev/null +++ b/files/ko/tools/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/ko/tools/how_to/open_the_debugger/index.html b/files/ko/tools/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..5b27e11b7a --- /dev/null +++ b/files/ko/tools/how_to/open_the_debugger/index.html @@ -0,0 +1,24 @@ +--- +title: Open the debugger +slug: Tools/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition 에 나타나는 JavaScript Debugger 에 대해 설명합니다.</p> + +<p>이전 버전의 Firefox 또는 FireFox Beta 또는 Release 에서는 어떠했는지 보려면 <a href="/ko/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a> 를 참조하세요.</p> + +<p>이전 버전의 Debugger 로 다시 전환해야 하는 경우, about:config 에서 "devtools.debugger.new-debugger-frontend" 를 false 로 설정하면 됩니다.</p> +</div> + +<p>Debugger 를 여는 방법에는 3가지가 있습니다</p> + +<ul> + <li>Firefox 상단 메뉴 모음 (또는 메뉴 막대를 표시하거나 Mac OS X에있는 경우 도구 메뉴)의 [도구] - [웹 개발자 도구] - [디버거]를 선택하십시오.</li> + <li>단축키 <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>S</kbd> 사용하여 열 수 있습니다. (Mac OS X에서는 <kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd>)</li> + <li>매뉴 버튼 ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> )을 누릅니다, [웹 개발자 도구] - [디버거]를 선택하십시오.</li> +</ul> + +<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p> + +<p> </p> diff --git a/files/ko/tools/how_to/search/index.html b/files/ko/tools/how_to/search/index.html new file mode 100644 index 0000000000..9971abcaae --- /dev/null +++ b/files/ko/tools/how_to/search/index.html @@ -0,0 +1,24 @@ +--- +title: Search +slug: Tools/How_to/Search +translation_of: Tools/Debugger/How_to/Search +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.</p> + +<p>이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (Firefox 52 이전)</a>를 참조하십시오.</p> + +<p>이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을<code>false</code>로 설정하여 수행 할 수 있습니다.</p> +</div> + +<h2 id="파일_찾기">파일 찾기</h2> + +<p>특정 파일을 검색하려면, 단축키 <kbd>Control</kbd> + <kbd>P</kbd> (Mac에서는 <kbd>Command</kbd> + <kbd>P</kbd> ) 를 누르고 검색어를 입력하세요. <a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스창(source pane)</a>에는 입력하는 동안 일치하는 모든 파일 목록을 표시됩니다. 위 아래 방향키로 목록을 이동할 수 있고, <kbd>Enter(Return)</kbd>키로 해당 파일을 열 수 있습니다:</p> + +<p>{{EmbedYouTube("xXsfYx0THWg")}}</p> + +<h2 id="파일_내에서_찾기">파일 내에서 찾기</h2> + +<p><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스창(source pane)</a>에 로드된 파일의 특정 단어를 검색하려면 <a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스창(source pane)</a>에 포커스가 있는 상태에서 단축키 <kbd>Control</kbd> + <kbd>F</kbd> (Mac에서는 <kbd>Command</kbd> + <kbd>F</kbd>) 를 누르고 <kbd>Enter(Return)</kbd> 키를 눌러서 검색합니다. 디버거는 코드내에 일치하는 검색한 단어의 수를 표시하고 각 단어를 네모칸으로 표시합니다 :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14997/new-search.png" style="display: block; height: 524px; margin-left: auto; margin-right: auto; width: 595px;"></p> diff --git a/files/ko/tools/how_to/set_a_breakpoint/index.html b/files/ko/tools/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..f5d2af9e06 --- /dev/null +++ b/files/ko/tools/how_to/set_a_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set a breakpoint +slug: Tools/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.</p> + +<p>이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (Firefox 52 이전)</a>를 참조하십시오.</p> + +<p>이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을<code>false</code>로 설정하여 수행 할 수 있습니다.</p> +</div> + +<p>중단점을 설정하는 방법은 다음과 같은 세가지 방법이 있습니다:</p> + +<ul> + <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a> 내에서, 중단점을 원하는 지점의 줄번호(line number)를 클릭하여 중단점을 설정할 수 있습니다.</li> + <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a> 내에서,중단점을 원하는 지점의 줄번호에서 마우스 오른쪽 클릭하여 바로가기 메뉴의"중단점 추가"를 클릭하여 중단점을 설정할 수 있습니다.</li> + <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a> 내에서, 중단점을 원하는 지점의 부분에 커서를 놓고 단축키Ctrl+B (Windows/Linux) 또는 Command+B (Mac OS X)를 눌러서 중단점을 설정할 수 있습니다.</li> +</ul> + +<p>아래 비디오는 바로가기 메뉴(context menu)를 사용하여 중단 점을 설정합니다:</p> + +<p>{{EmbedYouTube("P7b98lEijF0")}}</p> + +<p>각 중단점은 디버거의 두 위치에 표시됩니다:</p> + +<ul> + <li><a href="/ko/docs/Tools/Debugger/UI_Tour#중단점_목록(Breakpoint_list)">중단점 목록</a>에는 중단점의 파일 이름과 줄번호가 표시됩니다.</li> + <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a>내에서 중단점은 파란색 화살표, <a href="/ko/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">조건부 중단점</a>은 주황색 화살표로 표시됩니다.</li> +</ul> diff --git a/files/ko/tools/index.html b/files/ko/tools/index.html new file mode 100644 index 0000000000..0b7421b03d --- /dev/null +++ b/files/ko/tools/index.html @@ -0,0 +1,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> diff --git a/files/ko/tools/network_monitor/index.html b/files/ko/tools/network_monitor/index.html new file mode 100644 index 0000000000..899055fb55 --- /dev/null +++ b/files/ko/tools/network_monitor/index.html @@ -0,0 +1,63 @@ +--- +title: Network Monitor +slug: Tools/Network_Monitor +tags: + - 가이드 + - 개발자도구 + - 네트워킹 + - 데브툴 + - 디버깅 + - 툴 + - 파이어폭스 +translation_of: Tools/Network_Monitor +--- +<div>{{ToolsSidebar}}</div> + +<p>네트워크 모니터는 파이어폭스가 페이지를 로드할 때나 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>로 인해 행해진 모든 네트워크 요청들의 소요 시간 및 세부사항을 나타냅니다.</p> + +<h2 id="네트워크_모니터_열기">네트워크 모니터 열기</h2> + +<p>네트워크 모니터를 여는데 몇 가지 다른 방법이 있습니다:</p> + +<ul> + <li>다음 키를 누릅니다: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( Mac 에서는 <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> 누릅니다).</li> + <li>웹 개발자 메뉴 (OS X 및 Linux의 도구 메뉴의 서브 메뉴)에서 "네트워크"를 선택하십시오.</li> + <li>기본 툴바 또는 햄버거 메뉴(<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) 아래에 있는 렌치 모양 아이콘(<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">)을 클릭 한 다음 "Network"를 선택하세요.</li> +</ul> + +<p>네트워크 모니터가 브라우저 창 하단에 나타납니다. 처음 네트워크 모니터를 열었을 때, request 정보가 보이지 않고 아래와 같이 나타납니다. <img alt="" src="https://mdn.mozillademos.org/files/16854/network_monitor_new.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>두 가지 액션 모두, 네트워크 모니터가 네트워크 활동 모니터링을 시작하게 합니다. 도구가 네트워크 요청들을 모니터링하면 화면에 다음과 같이 표시됩니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p> + +<p>네트워크 모니터는 도구 상자가 열려있을 때면 네트워크 모니터가 선택되지 않아도 네트워크 요청들을 기록합니다. 따라서, 네트워크 활동을 보기 위해서 Console을 보고 있어도 Console을 Network 모니터로 전환함으로써 페이지를 새로고침할 필요 없이 디버깅을 시작 할 수 있습니다.</p> + +<h2 id="UI_overview">UI overview</h2> + +<p>UI는 크게 네 부분으로 나뉩니다:</p> + +<ul> + <li>메인 화면에는 <a href="/en-US/docs/Tools/Network_Monitor/Toolbar">toolbar</a>, <a href="/en-US/docs/Tools/Network_Monitor/request_list">network request list</a>, <a href="/en-US/docs/Tools/Network_Monitor/request_details">network request details pane</a>이 있습니다:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p> + +<ul> + <li>The <a href="/en-US/docs/Tools/Network_Monitor/Performance_analysis">performance analysis</a> view는 별도의 화면입니다:</li> +</ul> + +<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p> + +<h2 id="Working_with_the_network_monitor">Working with the network monitor</h2> + +<p>The following articles cover different aspects of using the network monitor:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor/request_details">Network request details</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li> +</ul> diff --git a/files/ko/tools/page_inspector/index.html b/files/ko/tools/page_inspector/index.html new file mode 100644 index 0000000000..c98dd8d947 --- /dev/null +++ b/files/ko/tools/page_inspector/index.html @@ -0,0 +1,48 @@ +--- +title: 페이지 검사기 +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div><p>페이지의 HTML 과 CSS 를 검사하고 수정하기 위해 페이지 검사기를 사용하라.</p> + +<p>파이어폭스의 로컬 복사본으로 로드된 페이지를 검사하거나 파이어폭스 운영체제 기기 혹은 안드로이드 파이어폭스 같은 원격 목표를 검사할 수 있다. 원격 목표물의 개발자 도구에 연결하는 법을 배우기 위해 <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>을 보라.</p> + +<hr> +<h2 id="사용자_인터페이스_투어">사용자 인터페이스 투어</h2> + +<p>검사기를 둘러싼 자신만의 방법을 찾기 위해 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a> 이 있다.</p> + +<hr> +<h2 id="방법">방법</h2> + +<p>어떤 것이 검사기로 작업 가능한 지 찾기 위해 다음의 방법 지침을 보라:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a> 검사기 열기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a> HTML 검사하고 수정하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a> 박스 모델 검사하고 수정하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a> 색상 검사하고 선택하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a> 페이지 내 요소의 위치 재정의하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a> 글꼴 보기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a> 변이 시각화하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a> 검사기 API 사용하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a> 요소 선택하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> CSS 검사하고 수정하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a> 이벤트 리스너 검사하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> 애니메이션 작업하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a> CSS 필터 수정하기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a> 배경 이미지 보기</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a> 웹콘솔의 검사기 사용하기</li> +</ul> +</div> + +<hr> +<h2 id="참고">참고</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts</a> 키보드 단축키</li> + <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a> 설정</li> +</ul> +</div> diff --git a/files/ko/tools/page_inspector/ui_tour/index.html b/files/ko/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..7a7cfbb158 --- /dev/null +++ b/files/ko/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,104 @@ +--- +title: UI 일주 +slug: Tools/Page_Inspector/UI_Tour +translation_of: Tools/Page_Inspector/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>이 글은 페이지 검사기의 사용자 인터페이스에 대한 주요 부분의 간략한 설명이다.</p> + +<p>검사기 UI의 상위 3개 요소를 다룬다:</p> + +<ul> + <li>"요소 선택" 버튼</li> + <li>HTML 구역</li> + <li>CSS 구역</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">이 안내는 의도적으로 가능한 쩗게 유지된다. 다양한 검사기 사용법에 대한 상세안내로 가는 링크가 걸려 있다.</p> + +<h2 id="요소_선택_버튼">요소 선택 버튼</h2> + +<p>검사기가 현재 선택된 요소에 대한 자세한 정보를 준다. 요소 선택 버튼은 검사를 위해 요소를 선택할 수 있는 한 방법이다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p> + +<p>실제 <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>의 부분이며, 검사기 뿐만 아니라 어떠한 도구로부터든 즉시 접근 가능하다는 것을 인지하라.</p> + +<p>한 요소를 선택하는 법을 배우기 위해 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a> 에 대한 지침을 보라.</p> + +<h2 id="HTML_구역">HTML 구역</h2> + +<p>검사기가 두 개로 반나눠져 있다. 왼쪽 반은 HTML 구역이 차지하고 있다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p> + +<p>HTML 구역의 구조에 대해 더 알기 위해, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a> 에 대한 지침을 보라.</p> + +<h2 id="CSS_구역">CSS 구역</h2> + +<p>오른쪽 부분은 CSS 구역이 차지한다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">CSS 구역은 5가지 화면으로 나뉜다:</p> + +<ul> + <li>Rules view 규칙 화면</li> + <li>Computed view 계산된 스타일 화면</li> + <li>Fonts view 글꼴 화면</li> + <li>Box Model view 박스 모델 화면</li> + <li>Animations view 애니메이션 화면</li> +</ul> + +<p>다른 화면 간에 이동하기 위해 상단의 탭을 사용하라.</p> + +<h3 id="규칙_화면">규칙 화면</h3> + +<p>규칙 화면은 선택된 요소에 적용된 모든 규칙을 목록으로 나열한다. 가장 특이성이 높은 것에서 부터 가장 특이성이 떨어지는 것으로 정렬된다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> 를 보라.</p> + +<h3 id="계산된_스타일_화면">계산된 스타일 화면</h3> + +<p>계산된 스타일 화면은 선택된 요소의 계산 완료된 CSS 를 보여준다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13130/computed-view.png" style="display: block; height: 856px; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> 를 보라.</p> + +<h3 id="글꼴_화면">글꼴 화면</h3> + +<div class="warning"> +<p>파이어폭스47 부터 글꼴 화면은 기본적으로 불가능해진다. 충분한 특성을 가진 다른 대체품을 작업중이다.</p> + +<p>그 동안 글꼴 화면을 보고자 한다면, <code>about:config </code>을 방문해서 <code>devtools.fontinspector.enabled 을</code> 찾아서 <code>true </code>로 설정하라.</p> +</div> + +<p>글꼴 화면은 수정가능한 예제와 함께 페이지 내의 모든 글꼴을 보여준다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p> + +<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a> 를 보라.</p> + +<h3 id="박스_모델_화면">박스 모델 화면</h3> + +<p>박스 모델 화면은 선택된 요소의 박스 모델의 수정가능한 화면을 제공한다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13128/box-model-view.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a> 를 보라.</p> + +<h3 id="애니메이션_화면">애니메이션 화면</h3> + +<p>애니메이션 화면은 선택된 요소에 적용된 어떠한 애니메이션이든 상세 정보와 그들을 멈출 콘트롤러를 제공한다:</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p> + +<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> 를 보라.</p> + +<h3 id="CSS_구역_보이게_하거나_가리기">CSS 구역 보이게 하거나 가리기</h3> + +<p>파이어폭스40 부터, CSS 구역을 보이게 하거나 가리는 사용하는 버튼을 툴바에서 볼 수 있다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p> diff --git a/files/ko/tools/performance/index.html b/files/ko/tools/performance/index.html new file mode 100644 index 0000000000..8a1784f43b --- /dev/null +++ b/files/ko/tools/performance/index.html @@ -0,0 +1,94 @@ +--- +title: 성능 측정 도구 +slug: Tools/Performance +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div><p>성능 도구(Performance tool)는 반응형, 자바 스크립트, 그리고 레이아웃의 성능에 대한 전반적인 통찰력을 줍니다.</p> + +<p>성능 도구를 사용하여 특정 시간 동안 사이트를 기록하고 프로파일링을 할 수 있습니다. 이를 이용하면 브라우저가 사이트를 렌더링 하는 중에 일어나는 상황을 <a href="/ko/docs/Tools/Performance/UI_Tour#Waterfall_overview">한 눈에</a> 보여주고, <a href="/ko/docs/Tools/Performance/Frame_rate">프레임 레이트</a>의 그래프를 그려줍니다.</p> + +<p>성능 도구는 더 자세한 분석을 위해 세 가지 보조 도구들을 지원합니다 :</p> + +<ul> + <li><a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a>(Waterfall)은 브라우저의 동작들을 보여줍니다. 예를 들어 레이아웃, 자바스크립트, 리페인트, 가비지 콜렉션 등을 보여줍니다.</li> + <li><a href="/ko/docs/Tools/Performance/Call_Tree">콜트리</a>(Call Tree)는 브라우저가 가장 많은 시간을 소비하는 자바스크립트 함수들을 보여줍니다.</li> + <li><a href="/ko/docs/Tools/Performance/Flame_Chart">프레임차트</a>(Frame Chart)는 기록을 하는 동안 사용되는 자바스크립트 콜스택을 보여줍니다.</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="시작하기">시작하기</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Performance/UI_Tour">UI 투어</a></dt> + <dd> + <p>성능 도구를 사용하는 방법을 찾아보려면 UI에 대한 퀵투어가 있습니다.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Performance/How_to">시작 방법</a></dt> + <dd>기본적인 업무: 도구를 열기, 생성, 저장, 로드하고 녹화를 설정합니다.</dd> + <dt> </dt> +</dl> +</div> +</div> + +<hr> +<h2 id="성능_도구의_구성요소">성능 도구의 구성요소</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Performance/Frame_rate">프레임 레이트</a></dt> + <dd>당신의 사이트의 전반적인 반응형을 이해합니다.</dd> + <dt><a href="/ko/docs/Tools/Performance/Call_Tree">콜트리</a></dt> + <dd>당신의 사이트의 자바스크립트에서 부하가 걸리는 부분을 찾습니다.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a></dt> + <dd>사용자가 당신의 사이트와 상호작용할때 브라우저가 어떻게 작용하는지 이해합니다. </dd> + <dt><a href="/ko/docs/Tools/Performance/Flame_Chart">프레임 차트</a></dt> + <dd>녹화되는 동안에 어떤 자바스크립트 함수들이 언제 수행되는 지 봅니다.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="시나리오">시나리오</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt> <a href="/ko/docs/Tools/Performance/Scenarios/Animating_CSS_properties">CSS 애니메이팅</a></dt> + <dd>워터폴을 사용하여 어떻게 브라우저가 페이지를 업데이트하고, CSS 속성들이 어떻게 성능에 영향을 주는지 알아보세요.</dd> + <dt> </dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ko/docs/Tools/Performance/Scenarios/Intensive_JavaScript">인텐시브한 자바스크립트</a></dt> + <dd>프레임레이트와 워터폴을 사용하면 장기간 실행되는 자바스크립트로 인해서 발생되는 수행상의 문제들과 workers를 사용하는 것이 이 상황에서 어떻게 도움이 되는지 강조해서 표시합니다.</dd> +</dl> +</div> +</div> + +<p> </p> + +<div class="column-half"> +<dl> + <dd> </dd> +</dl> +</div> + +<p> </p> diff --git a/files/ko/tools/performance/ui_tour/index.html b/files/ko/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..f32605ba3e --- /dev/null +++ b/files/ko/tools/performance/ui_tour/index.html @@ -0,0 +1,127 @@ +--- +title: UI Tour +slug: Tools/Performance/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>The performance tool's UI consists of 4 main pieces:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p> + +<ul> + <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a></li> + <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recordings_pane">Recordings pane</a></li> + <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">Recording overview</a></li> + <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>, which may contain any one of: + <ul> + <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li> + </ul> + </li> +</ul> + +<h2 id="Toolbar">Toolbar</h2> + +<p>Toolbar는 다음과 같은 버튼을 포함합니다:</p> + +<ul> + <li>기록 시작, 정지</li> + <li>저장된 이전 기록 가져오기</li> + <li>기록 패널 비우기. 주의: 저장되지 않은 기록은 사라집니다 <em>.</em></li> + <li>filter the <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">markers</a> that are displayed in the Waterfall view</li> + <li>switch the active tool in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>.</li> + <li>access the Settings popup</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p> + +<h2 id="Recordings_pane">Recordings pane</h2> + +<p>The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p> + +<p>At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".</p> + +<h2 id="Recording_overview">Recording overview</h2> + +<p>This displays an overview of the entire recording, with the x-axis representing time.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>It contains two elements: an overview of the Waterfall and a frame rate graph.</p> + +<h3 id="Waterfall_overview">Waterfall overview</h3> + +<p>This presents a compressed view of the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Recorded operations are color-coded using <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">the same scheme as in the main Waterfall view</a>.</p> + +<h3 id="Frame_rate_graph">Frame rate graph</h3> + +<p>The frame rate gives you an overview of the browser's responsiveness during the recording:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>See the separate article on <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a>.</p> + +<h3 id="Correlating_events">Correlating events</h3> + +<p>Because these elements are synchronized, you can correlate events in one element with events in another.</p> + +<p>For example, in the screenshot below a long-running paint operation (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">shown as a green bar</a> in the waterfall overview) corresponds to a drop in the frame rate:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h3 id="Zooming_in">Zooming in</h3> + +<p>You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h2 id="Details_pane">Details pane</h2> + +<p>The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>.</p> + +<h3 id="Waterfall">Waterfall</h3> + +<p>The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>To learn much more about the Waterfall, see the separate <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> page.</p> + +<h3 id="Call_Tree">Call Tree</h3> + +<p>The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br> + To learn much more about the Call Tree, see the separate <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page.</p> + +<h3 id="Flame_Chart">Flame Chart</h3> + +<p>If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>To learn much more about the Flame Chart, see the separate <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> page.</p> + +<h3 id="Allocations">Allocations</h3> + +<div class="geckoVersionNote"> +<p>The Allocations view is new in Firefox 46.</p> +</div> + +<p>The Allocations view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<p>To learn much more about the Allocations view, see the separate <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> page.</p> + +<p> </p> diff --git a/files/ko/tools/remote_debugging/firefox_for_android/index.html b/files/ko/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..aa3e7570de --- /dev/null +++ b/files/ko/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,138 @@ +--- +title: Remotely debugging Firefox <36 for Android +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>This guide is for Firefox versions version 36 and earlier. For more recent Firefox versions, please use the <a href="./Debugging_Firefox_for_Android_with_WebIDE">WebIDE</a> guide.</p> +</div> + +<p>This guide explains how to use <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to inspect or debug code running in <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android </a>over USB.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. </p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>First, you'll need:</p> + +<ul> + <li>a desktop or laptop computer with Firefox running on it</li> + <li>an Android device <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android running on it</li> + <li>a USB cable to connect the two devices</li> +</ul> + +<h3 id="ADB_setup">ADB setup</h3> + +<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p> + +<h4 class="note" id="On_the_Android_device">On the Android device</h4> + +<ul> + <li><a href="https://developer.android.com/studio/command-line/adb.html#Enabling" title="http://developer.android.com/guide/developing/device.html#setting-up">Enable USB debugging in phone settings</a>.</li> + <li>Attach the device to the desktop via USB.</li> +</ul> + +<h4 class="note" id="On_the_desktop">On the desktop</h4> + +<ul> + <li>Install the correct version of the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> for your device.</li> + <li>Using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li> + <li>Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.</li> +</ul> + +<p>To check it worked, open up a command shell on the desktop and type:</p> + +<pre>adb devices</pre> + +<p>You should see some output like:</p> + +<pre>List of devices attached +51800F220F01564 device +</pre> + +<p>(The long hex string will be different.)</p> + +<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p> + +<h3 id="Enable_remote_debugging">Enable remote debugging</h3> + +<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p> + +<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4> + +<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p> + +<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "Toggle".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 class="note" id="Firefox_for_Android_25_and_later">Firefox for Android 25 and later</h4> + +<p>On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p> + +<h4 id="On_the_desktop_2">On the desktop</h4> + +<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="Note">If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.</div> + +<p>You'll then see a new option in the Web Developer menu labeled "Connect...":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Connecting">Connecting</h2> + +<p>Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.</p> + +<h4 class="note" id="On_the_desktop_3">On the desktop</h4> + +<p>For Firefox 34 or below, go to a command prompt, and type:</p> + +<pre>adb forward tcp:6000 tcp:6000</pre> + +<p>For later versions of Firefox, go to a command prompt, and type:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</pre> + +<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p> + +<p>For Firefox OS, type:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + +<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p> + +<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p> + +<h4 class="note" id="On_the_Android_device_2">On the Android device</h4> + +<p>Next you'll see a dialog in Firefox for Android asking you to confirm the connection:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.</p> + +<h4 class="note" id="On_the_desktop_4">On the desktop</h4> + +<p>Next, the desktop shows you a dialog that looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p> + +<ul> + <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li> + <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li> +</ul> + +<p>Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ko/tools/remote_debugging/index.html b/files/ko/tools/remote_debugging/index.html new file mode 100644 index 0000000000..267a6618cc --- /dev/null +++ b/files/ko/tools/remote_debugging/index.html @@ -0,0 +1,31 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div><p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> +</ul> + +<h2 id="Firefox_for_Android">Firefox for Android</h2> + +<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p> + +<h2 id="Firefox_for_Metro">Firefox for Metro</h2> + +<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p> + +<h2 id="Firefox_OS">Firefox OS</h2> + +<p><a href="/en-US/docs/Tools/WebIDE">WebIDE</a> includes instructions for connecting the Firefox developer tools to the Firefox OS Simulator or to a Firefox OS device.</p> + +<h2 id="Thunderbird">Thunderbird</h2> + +<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p> diff --git a/files/ko/tools/scratchpad/index.html b/files/ko/tools/scratchpad/index.html new file mode 100644 index 0000000000..9701e48ffb --- /dev/null +++ b/files/ko/tools/scratchpad/index.html @@ -0,0 +1,90 @@ +--- +title: Scratchpad +slug: Tools/Scratchpad +translation_of: Archive/Tools/Scratchpad +--- +<div>{{ gecko_minversion_header("6.0") }}</div> + +<p>Firefox 6 이후 내장되고 있는 스크래치패드(Scratchpad)는 JavaScript 코드의 실험에 편리한 환경을 제공합니다. 웹 페이지의 컨텐츠와 직접 연결해서 코드를 조작할 수 있기 때문에 실제 서비스하는 웹 페이지를 최종적으로 테스트하거나 아이디어를 시험해 볼 수 있습니다. 또한 기존의 웹 사이트를 조작하거나 사이트에서 하고 싶은 조작을 할 수도 있습니다.</p> + +<p>한 번에 1 행의 코드를 실행하도록 설계되고 있는 <a href="/ko/Tools/Web_Console" title="Using the Web Console">웹 콘솔</a>과는 달리 스크래치패드는 보다 큰 JavaScript 코드 덩어리를 편집할 수 있고 그리고 출력 결과의 용도에 다양한 방법으로 코드를 실행할 수 있습니다.</p> + +<h2 id="스크래치패드를_사용하기">스크래치패드를 사용하기</h2> + +<p>스크래치패드 윈도우를 열려면 웹 개발자 메뉴(Mac 에서는 도구모음 메뉴의 부메뉴로서 존재)로 스크래치패드를 선택합니다. 그러면 스크래치패드의 편집 윈도우가 열립니다. 윈도우내에는 스크래치패드의 사용법을 간단하게 나타내 보이는 코멘트가 기재되어 있습니다. 거기에 즉시 JavaScript 의 코드를 쓰기 시작할 수 있습니다.</p> + +<p>스크래치패드의 윈도우는 아래와 같은 모양입니다. (Windows 나 Linux 에서는 도구모음도 표시되어 한편 Mac 에서는 화면상부에 도구모음이 표시됩니다):</p> + +<p><img alt="scratchpad.png" class="default internal" src="/@api/deki/files/5566/=scratchpad.png"></p> + +<p>유용한 키보드 바로가기을 포함한 에디터 그 자체에 관한 문서에 대해서는 <a href="/ko/Tools/Using_the_Source_Editor" title="Using the Source Editor">소스 에디터 사용</a>을 참고하세요.</p> + +<p>윈도우의 아래에 코드의 현재의 실행 범위가 표시 됩니다. 여기에는 스크래치패드의 내용 또는 현재의 페이지의 컨텐츠가 됩니다. 자세한 것은 <a href="/ko/Tools/Scratchpad#Scratchpad_scope" title="Scratchpad scope">스크래치패드의 범위</a>를 참고하세요.</p> + +<div class="geckoVersionNote">{{ gecko_callout_heading("10.0") }} +<p>Gecko 10.0 {{ geckoRelease("10.0") }} 로 스크래치패드의 에디터가 문법상 하이라이트나 개량된 인덴트등의 기능을 가지는 <a class="external" href="http://eclipse.org/orion/" title="http://eclipse.org/orion/">Orion</a> 로 옮겨졌습니다.여기에 스크래치패드의 내용이 Firefox 의 세션 복원 기능을 이용해 저장되게 되었으므로 Firefox 다시 시작 후에도 내용이 남습니다.</p> +</div> + +<p>파일 메뉴에서는 JavaScript 코드의 저장이나 읽기를 실행할 수 있기 때문에 다음에 코드를 재이용할 수 있습니다.</p> + +<h3 id="코드_실행하기">코드 실행하기</h3> + +<p>코드를 기술하면 실행하고 싶은 위치 범위를 선택해 오른쪽 클릭해 (또는 도구모음의 실행 메뉴로) 코드의 실행 방법을 선택해 주세요. 코드의 실행 방법은 세 가지 종류 있습니다.</p> + +<div class="note"><strong>주의:</strong> 범위 선택을 실시하지 않는 경우는 윈도우내의 코드 모두 실행됩니다.</div> + +<h4 id="실행">실행</h4> + +<p>실행 옵션을 선택하면 선택한 코드가 실행됩니다. 이것은 함수나 그 외의 코드를 실행하거나 페이지내의 컨텐츠를 조작하거나 하는 것입니다.</p> + +<h4 id="검사">검사</h4> + +<p>검사 옵션은 코드를 실행 옵션과 같이 실행합니다. 다만 실행 후에 반환값의 검증을 실시할 수 있는 객체 검사기가 열립니다.</p> + +<p>예를 들면 이하의 코드를 입력합니다:</p> + +<pre>window +</pre> + +<p>그리고 검사를 선택하면 이하와 같은 검사기의 윈도우가 표시됩니다:</p> + +<p><img alt="inspector.png" class="default internal" src="/@api/deki/files/5565/=inspector.png"></p> + +<h4 id="표시">표시</h4> + +<p>표시 옵션은 선택된 코드를 실행하고 그 결과를 스크래치패드의 에디터내에 코멘트로서 삽입합니다. 이것은 작업중에 테스트 결과의 실행 로그를 남기는데 편리한 방법입니다. 또 이 기능은 큰 문제를 떠안았을 때에 보다 좋은 계산기 프로그램을 가지고 있지 않은 경우에서도 만일의 경우의 계산기로서 사용할 수 있습니다.</p> + +<h2 id="지우기">지우기</h2> + +<p>실행 메뉴 또는 스크래치패드의 윈도우로 오른쪽 클릭한다고 표시되는 context menu의 "변수 재설정"을 선택하면 모든 변수를 재설정 할 수 있습니다.</p> + +<h2 id="스크래치패드_사용_예제">스크래치패드 사용 예제</h2> + +<p>아래에 도움이 되는 사례는 많이 있습니다. 여기에서 몇 가지를 소개합니다.</p> + +<h3 id="새로운_코드_테스트">새로운 코드 테스트</h3> + +<p>스크래치패드는 새로운 코드를 실제의 브라우저 환경에서 테스트하는 것에 특별히 도움이 됩니다. 디버그 중의 코드를 스크래치패드에 붙여넣기하여 실행해 그것이 동작할 때까지 조정합니다. 동작하게 되면 코드를 본래의 파일에 되돌려 완성합니다. 많은 경우 웹 페이지를 다시 읽고 코드를 작성한 후, 디버그 및 테스트를 실시할 수 있습니다.</p> + +<h3 id="재활용_가능한_코드">재활용 가능한 코드</h3> + +<p>스크래치패드의 도구 모음에는 JavaScript 코드의 저장이나 읽기를 실시하는 명령어가 있습니다. 이 기능은 잘 사용하는 JavaScript는 작은 코드의 보관에 사용할 수 있습니다. 예를 들면 데이터 읽기에 AJAX 리퀘스트를 이용하는 사이트에서 작업을 실시하고 있는 경우 테스트나 데이터의 검증을 위해서 그러한 읽기 조작을 실시하는 코드 영역을 저장해 둘 수 있습니다. 같이 DOM 에 관한 특정의 정보를 덤프 하는 함수와 같은 유용한 범용 디버그 함수를 저장해 둘 수도 있습니다.</p> + +<h2 id="스크래치패드_범위"><a name="Scratchpad_scope">스크래치패드 범위</a></h2> + +<p><a name="Scratchpad_scope"> </a></p> + +<p><a name="Scratchpad_scope">스크래치패드로 실행하는 코드는 페이지 전체에 접근 가능한 샌드 박스내에서 실행됩니다만 신규 작성한 변수는 페이지에 나가지 않습니다. 명시적으로 변수를 페이지로 보내고 싶은 경우는,{{ domxref("window") }} 객체에 그 변수를 두는 것으로 실현할 수 있습니다:</a></p> + +<pre><a name="Scratchpad_scope">window.myVariable = value; +</a></pre> + +<p><a name="Scratchpad_scope">이 경우 신규 작성한 <code>window.myVariable</code> 변수는 페이지상에서 실행하고 있는 스크립트에 접근 가능하게 됩니다.</a></p> + +<div class="note"><a name="Scratchpad_scope"><strong>주의:</strong> 이 샌드 박스의 동작은 </a><a href="/ko/Tools/Web_Console" title="Using the Web Console">웹 콘솔</a>과 유사합니다. 다만 스크래치패드는 탭을 바꾸어 사용하는 점이 웹 콘솔과는 다릅니다. 즉, 스크래치패드로 실행하는 코드는 맨 앞면의 브라우저 윈도우로 현재 선택하고 있는 탭에 대해서만 실행됩니다. 예를 들면 같은 테스트를 복수의 웹 서버에 대해서 실행 할 수 있게 됩니다.</div> + +<h3 id="스크래치패드를_Firefox_내부_접근_사용">스크래치패드를 Firefox 내부 접근 사용</h3> + +<p>Firefox 자체에 대하고 작업을 하는 경우나 확장 기능을 개발하는 경우는 스크래치패드를 이용해 브라우저의 내부 모두에게 액세스 할 수 있어 편리합니다. 이를 위해서는 <code>about:config</code>로 설정 <code>devtools.chrome.enabled</code> 를 <code>true</code> 로 설정하는 것이 필요합니다. 이 설정을 하면 실행 환경 메뉴에 브라우저라고 하는 선택 사항이 추가됩니다.이것을 선택하면 범위가 웹 페이지의 컨텐츠로부터 브라우저 전체로 바뀝니다.</p> + +<p>{{ languages( { "en": "en/Tools/Scratchpad", "es": "es/Herramientas/Borrador", "fr": "fr/Outils/Ardoise" } ) }}</p> diff --git a/files/ko/tools/web_console/index.html b/files/ko/tools/web_console/index.html new file mode 100644 index 0000000000..8f034e2e57 --- /dev/null +++ b/files/ko/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: Web Console +slug: Tools/Web_Console +translation_of: Tools/Web_Console +--- +<div>{{ToolsSidebar}}</div><p>웹 콘솔:</p> + +<ol> + <li>로그 정보는 웹페이지와 연관되어 있습니다 : 페이지 컨텍스트 안에서 자바스크립트 코드가 동작하면서 네트워크 요청, 자바스크립트, CSS, 보안 에러들과 에러만큼 많은 경고들, 정보메시지들이 명시적으로 기록됩니다</li> + <li> 페이지의 컨텍스트 안에서 자바 스크립트 표현식으로 처리된 웹 페이지와의 상호작용을 가능하게 해줍니다</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">웹 콘솔 시작하기</a></dt> + <dd>웹 콘솔 사용을 시작하기 위한 방법</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">명령 라인 인터프리터</a></dt> + <dd>콘솔을 사용하여 문서와 상호작용하기 위한 방법</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">콘솔 나누기</a></dt> + <dd>다른도구와 함께 콘솔 사용하기</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">콘솔 메시지들</a></dt> + <dd>콘솔 로그의 메시지 세부사항들</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">Rich output</a></dt> + <dd>콘솔에 의해 기록된 객체를 보고 상호작용.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">단축키</a></dt> + <dd>단축키 참고</dd> +</dl> +</div> +</div> diff --git a/files/ko/tools/webide/index.html b/files/ko/tools/webide/index.html new file mode 100644 index 0000000000..b5257f47ae --- /dev/null +++ b/files/ko/tools/webide/index.html @@ -0,0 +1,42 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - Debugging + - Firefox OS + - NeedsTranslation + - TopicStub + - WebIDE + - tool +translation_of: Archive/WebIDE +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>WebIDE enables you to create, edit, run, and debug web apps using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>It also enables you to connect the <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB (or over Wi-Fi since <a href="/en-US/Firefox/Releases/39">Firefox 39</a>), or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">create an app, or open an existing app</a>. If you're creating a new app you can start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<hr> +<dl> + <dt><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">Opening WebIDE</a></dt> + <dd>How to open WebIDE from within Firefox.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">Setting up runtimes</a></dt> + <dd>How to connect to a runtime in which you can install apps, including Firefox OS devices, the the Firefox OS Simulator, and Firefox for Android.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">Creating and editing apps</a></dt> + <dd>How to create, open, and develop apps using WebIDE.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/The_runtime_menu">The runtime menu</a></dt> + <dd>Once you've selected a runtime, use the runtime menu to get information about the runtime and its apps, modify settings, and take a screenshot.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">Running and debugging apps</a></dt> + <dd>How to install apps to a runtime and debug them using the Firefox Developer Tools.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Working with Cordova apps in WebIDE</a></dt> + <dd>From Firefox 39, you can edit and debug Cordova apps using WebIDE.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a></dt> + <dd>Help for problems with WebIDE, especially problems connecting to a runtime.</dd> +</dl> diff --git a/files/ko/tools/webide/문제해결/index.html b/files/ko/tools/webide/문제해결/index.html new file mode 100644 index 0000000000..1cd12c1b45 --- /dev/null +++ b/files/ko/tools/webide/문제해결/index.html @@ -0,0 +1,115 @@ +--- +title: WebIDE 문제해결 +slug: Tools/WebIDE/문제해결 +translation_of: Archive/WebIDE/Troubleshooting +--- +<div>{{ToolsSidebar}}</div><h2 id="USB로_Firefox_OS_장치_연결하기">USB로 Firefox OS 장치 연결하기</h2> + +<p>WebIDE를 통한 Firefox OS 장치 연결이 정상적이지 않을 때, 아래의 방법을 시도해보시기 바랍니다.</p> + +<ul> + <li>Firefox OS 버전 확인: 연결하고자 하는 기기에 <strong>Firefox OS 1.2/Boot2Gecko 1.2</strong> 이상의 버전이 동작하고 있는 것을 확인하세요. 버전을 확인하기 위해서는 기기에서 Settings 어플리케이션의 <code>Device Information > Software</code> 에서 확인할 수 있습니다. 대상 기기에서 동작하는 소프트웨어의 버전이 낮을 경우에는 <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a>에서 연결 대상 기기를 찾은 뒤, 지시에 따라 업그레이드를 진행하시기 바랍니다.</li> + <li>원격 디버깅 활성화: 대상 기기의 Settings 어플리케이션에서 <code>Device information > More information > Developer</code>로 이동한 뒤 + <ul> + <li>Firefox OS 1.3과 그 이전 버전: 체크 박스 형태의 "Remote Debugging"을 체크하세요.</li> + <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li> + </ul> + </li> + <li>잠금화면 끄기: in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer.</li> + <li>사용중인 USB케이블 확인: + <ul> + <li>Try unplugging and replugging in the USB cable.</li> + <li>Try plugging the USB cable into a different port on your computer. You may have to alternate between ports.</li> + <li>Try a different USB cable. The cables that come with phones are often of poor quality and fail often.</li> + <li>Try a shorter USB cable. Long USB cables have been known to not work so well.</li> + </ul> + </li> + <li>Try disabling and re-enabling Remote Debugging in the Settings app on the device.</li> + <li>If <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">you disabled the ADB Addon Helper</a>, did you successfully run the <code>adb forward</code> command?</li> + <li>If you use Linux: + <ul> + <li>Make sure you added a <code>udev</code> rules file, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values. Next, run the <code>adb devices</code> to make sure your device is in the list. If device appears to be "no permission", you need to restart adb server (e.g. <code>adb kill-server;adb start-server</code>).</li> + </ul> + </li> + <li>If you use Windows: + <ul> + <li>You need to install drivers, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone web site</a> and drivers for Google devices on <a href="http://developer.android.com/sdk/win-usb.htm">Google web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li> + <li>If WebIDE can't see your device after following all the steps, you may have to <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> + </ul> + </li> + <li>If you use Mac OS X: + <ul> + <li>If you're getting timeout errors connecting to both simulators and real devices, you may be unable to connect to localhost due to an empty /etc/hosts file. You can solve the problem by populating the file and flushing DNS cache <a href="https://discussions.apple.com/thread/2729411?tstart=0">as described here</a>.</li> + <li>If you're an EasyTether user, you will need to uninstall or disable EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="Wi-Fi로_Firefox_OS_장치_연결하기">Wi-Fi로 Firefox OS 장치 연결하기</h2> + +<ul> + <li>Check your version: Wi-Fi debugging requires Firefox 39 or higher, and a Firefox OS device running a build of Firefox OS 3.0 from 2015-03-27 or later.</li> + <li>The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. <a href="https://bugzil.la/1145772">Bug 1145772</a> aims to improve this soon. If you have trouble with this, try scanning with a few different orientations. If you chose "Scan and Remember, then you won't have to scan the code again the next time you connect your computer to this device.</li> +</ul> + +<h2 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h2> + +<p>If you're trying to connect to a Firefox instance running on the Android OS and it doesn't show up, here are some things you can try:</p> + +<ul> + <li>Check your Firefox version: make sure your device is running<strong> Firefox 36 or higher</strong>. WebIDE will not detect older versions automatically, so you need to enable port forwarding and connect to the device port - follow the instructions <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">here</a>.</li> + <li>Make sure you have enabled remote debugging in Firefox: open Firefox for Android, open its menu, select <code>Settings</code>, and then check the checkbox at <code>Developer Tools > Remote debugging</code>.</li> + <li>Make sure that USB debugging is allowed in the device's developer settings</li> + <li>If you still do not see your device in the WebIDE window, try toggling <code>Remote debugging</code> on the phone. + <ul> + <li>Disconnect your device from your computer and turn off <code>Remote debugging</code> on the phone.</li> + <li>Reconnect the device and turn on <code>Remote debugging</code> - this restarts the debugger instance on the phone.</li> + <li>Try connecting via WebIDE again.</li> + </ul> + </li> + <li>If using Windows, make sure that your Android device is recognized correctly and that it is using the Google USB Driver that is included with the Android SDK.</li> +</ul> + +<h2 id="Connecting_to_other_browsers_Chrome_Safari">Connecting to other browsers (Chrome, Safari)</h2> + +<p>WebIDE makes use of <a href="/en-US/docs/Tools/Valence">Valence (formerly Firefox Tools Adapter)</a> to reach other browsers, like Chrome and Safari. </p> + +<p>If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the <a href="/en-US/docs/Tools/Valence">Valence page</a>.</p> + +<h2 id="Cant_debug_some_apps">Can't debug some apps</h2> + +<p>If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</p> + +<h2 id="Unable_to_load_project_list">Unable to load project list</h2> + +<p>If you open WebIDE in one version of Firefox, and then downgrade to a previous Firefox version with the same profile, you may see the error "Unable to load project list" when opening WebIDE in the earlier Firefox version.</p> + +<p>This can occur when the storage system that WebIDE uses (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) needs to move or restructure its internal files for the newer Firefox version. The project list then becomes effectively inaccessible to older versions of Firefox.</p> + +<p>No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.</p> + +<p>If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:</p> + +<ol> + <li>Close Firefox</li> + <li>Find your Firefox profile directory</li> + <li>Find the <code>storage</code> folder inside the profile directory</li> + <li>Under some part of this file tree, there should be files and/or directories that start with <code>4268914080AsptpcPerjo</code> (a hashed name of the database)</li> + <li>Remove any such files and directories</li> + <li>Start Firefox and WebIDE again</li> +</ol> + +<h2 id="Enable_logging">Enable logging</h2> + +<p>You can also enable verbose logging to gather diagnostics:</p> + +<ol start="1" style="list-style-type: decimal;"> + <li>Open <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, with the string value <code>all</code>, and set <code>extensions.adbhelper@mozilla.org.debug</code> to <code>true</code>.</li> + <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li> + <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li> +</ol> + +<h2 id="Get_help">Get help</h2> + +<p>Go to the <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> and we will try to help.</p> |