path: root/files/ko/archive/b2g_os/앱_관리자_사용하기/index.html

---
title: 앱 관리자 사용하기
slug: Archive/B2G_OS/앱_관리자_사용하기
translation_of: Archive/B2G_OS/Using_the_App_Manager
---
<div class="summary">
<p>앱 관리자는 Firefox 데스크톱에서 제공하는 새로운 도구로, Firefox OS phone과 Firefox OS 시뮬레이터에서 HTML5 웹앱을 테스트, 배치, 디버그할 수 있도록 돕는 여러 도구들을 브라우저에서 직접 제공합니다.</p>
</div>

<p style="text-align: center;"></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/z1Bxg1UJVf0?rel=0&amp;html5=1"></iframe></div></div><p></p>

<p>앱 관리자는 다음과 같이 구성되어 있습니다:</p>

<ul>
 <li><em><a href="#Apps_panel">앱 패널</a></em>:<em> </em>로컬 앱(소스코드가 자신의 컴퓨터에 위치)과 외부에서 호스팅되는 앱을 관리합니다. 이들을 패키징하고 장치나 시뮬레이터에 설치할 수 있으며 툴박스를 사용해 디버그도 할 수 있습니다.</li>
 <li><em><a href="#Device_panel">장치 패널</a></em>: 연결된 장치의 Firefox OS버전, 장치 API 사용에 필요한 퍼미션, 설치된 앱들에 대한 정보를 표시합니다.</li>
 <li><em><a href="/en-US/docs/Tools_Toolbox">툴박스</a>: </em> 앱 패널을 통해 실행중인 앱에 연결하고 디버깅 동작을 수행할 수 있는 개발도구(웹 콘솔, 인스펙터, 디버거 등)들의 세트입니다.</li>
</ul>

<h2 id="빠른_설정"><a name="Configuring_device">빠른 설정:</a></h2>

<p>이 섹션에서는 가능한한 빠르게 준비하는 법을 다룹니다. 보다 자세한 내용은 <a href="#device_and_system_config">장치 및 시스템 설정</a> 섹션으로 넘어가십시오. 그리고 문제가 있을 경우 <a href="#Troubleshooting">Troubleshooting</a> 섹션을 읽어보세요.</p>

<ol>
 <li>Firefox 데스크톱 26 이상을 설치했는지 확인하세요.</li>
 <li>앱 관리자를 엽니다. (URL바에 <code>about:app-manager</code>을 입력합니다)</li>
 <li>실제 장치가 없는 경우:
  <ol>
   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Firefox OS 시뮬레이터를 설치합니다.</a></li>
   <li>앱 관리자의 아래쪽 툴바에서 <em>시뮬레이터 시작</em>을 클릭하고 뒤이어 표시되는 설치된 시뮬레이터의 이름을 클릭합니다.</li>
  </ol>
 </li>
 <li>실제 장치가 있는 경우:
  <ol>
   <li>장치가 Firefox OS 1.2 이상을 구동중인지 확인하세요.</li>
   <li>Windows의 경우, 폰 제조사에서 제공하는 드라이버의 설치를 확인하세요. </li>
   <li>장치의 설정에서 화면 잠금을 비활성화하고 (<code>Settings &gt; <code>Screen Lock</code></code>) 원격 디버깅을 활성화합니다(<code>Settings &gt; Device information &gt; More information &gt; Developer</code>).</li>
   <li>Firefox Desktop에 <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">ADB Helper</a> 추가기능을 설치합니다.</li>
   <li>USB케이블로 장치와 컴퓨터를 연결하세요.</li>
   <li>앱 관리자 하단에 장치의 이름이 나타나면 클릭합니다.</li>
  </ol>
 </li>
 <li>하단 바에 "xxx에 연결됨"이 표시됩니다.</li>
 <li>앱 패널을 클릭해 앱을 추가합니다(패키지 또는 hosted).</li>
 <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li>
 <li>The <em>Debug</em> button connects the developer tools to the running app</li>
 <li><strong>문제가 발생한다면 <a href="#Troubleshooting">Troubleshooting</a>섹션을 참조하세요.</strong></li>
</ol>

<h2 id="장치_및_시스템_설정"><a name="device_and_system_config"></a>장치 및 시스템 설정</h2>

<p>앱 관리자를 사용할 때 가장 처음 해야할 일은 여러분의 시스템과 폰이 제대로 설정되었는지 확인하는 것입니다. 이 섹션에서 필요한 단계들을 알아보겠습니다.</p>

<h3 id="Firefox_1.2_이상_필요">Firefox 1.2 이상 필요</h3>

<p>장치가 Firefox OS 1.2/Boot2Gecko 1.2 또는 그 이상을 구동중인지 확인하세요. 장치의 Firefox OS 버전을 확인하려면 <code>Settings &gt; Device Information &gt; Software로 이동하십시오.</code></p>

<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p>

<p>Builds available:</p>

<p><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</p>

<p>More to follow</p>

<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p>

<h3 id="원격_디버깅(Remote_debugging)">원격 디버깅(Remote debugging)</h3>

<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings &gt; Device information &gt; More information &gt; Developer</code> and check the Remote Debugging checkbox.</p>

<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3>

<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p>

<p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p>

<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="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;" title="https://addons.mozilla.org">ADB Helper 확장기능 다운로드</a></p>

<p>Use ADB manually. You need to have it installed on your computer - download and install <code>adb</code> (see the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal:Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</p>

<div class="note">
<p>Note: ADB Helper 확장기능을 설치했다면 이 명령을 실행할 필요가 없습니다.</p>
</div>

<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2>

<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p>

<ol>
 <li>Plug the device into your computer via USB.</li>
 <li>Disable Screen lock on your device by going to <code>Settings &gt; 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>Start the App Manager — In Firefox Desktop select the <code>Tools &gt; Web Developer &gt; App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li>
 <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li>
 <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p>

<div class="note">
<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the <a href="#Enable_port_forwarding">Enable port forwarding</a> section, above.</p>
</div>

<h2 id="Firefox_OS_시뮬레이터_추가기능_사용하기"><a name="Simulator">Firefox OS 시뮬레이터 추가기능 사용하기</a></h2>

<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the appropriate simulator for your operating system:</p>

<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="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></p>

<div class="note">
<p>앞으로 더 많은 것들이 등장하겠지만, 지금은 Firefox OS 1.2 시뮬레이터만 이용할 수 있습니다.</p>
</div>

<p>Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:</p>

<ul>
 <li>"Firefox OS 1.2" ... etc (or something similar): the leftmost button contains the name of the simulator version you have installed. Click it to start the connection to the simulator.</li>
 <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li>
 <li>"Cancel": the right hand button cancels the connection.</li>
</ul>

<h2 id="앱_패널"><a name="Apps_panel">앱 패널</a></h2>

<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:</p>

<ul>
 <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li>
 <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li>
</ul>

<p>Information about your app should appear on the right hand side of the window, as seen below:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>

<h3 id="Manifest_편집기">Manifest 편집기</h3>

<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="width: 600px; display: block; margin: 0px auto;"></p>

<h3 id="Debugging">Debugging</h3>

<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>

<div class="note">
<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p>
</div>

<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>

<h3 id="Errors">Errors</h3>

<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>

<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p>

<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2>

<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>

<div class="note">
<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p>
</div>

<p><a name="permissions"></a>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>

<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p>

<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2>

<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p>

<ol>
 <li>
  <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p>

  <pre class="brush: bash">adb shell</pre>

  <p>Your prompt should change to <code>root@android</code>.</p>
 </li>
 <li>
  <p>Next, stop B2G running using the following command:</p>

  <pre class="brush: bash">stop b2g</pre>
 </li>
 <li>
  <p>Navigate to the following directory:</p>

  <pre>cd /data/b2g/mozilla/*.default/</pre>
 </li>
 <li>
  <p>Here, update the prefs.js file with the following line:</p>

  <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' &gt;&gt; prefs.js</pre>
 </li>
 <li>
  <p>After you've finished editing and saving the file, start B2G again using the following command:</p>

  <pre class="brush: bash">start b2g</pre>
 </li>
 <li>
  <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p>
 </li>
 <li>
  <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p>
 </li>
</ol>

<div class="note">
<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p>
</div>

<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2>

<p id="My_device_is_not_recognized">장치가 인식되지 않을 경우:</p>

<ul>
 <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li>
 <li>장치가 최소 Firefox OS 1.2를 구동중인가요?</li>
 <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li>
 <li>폰의 settings에서 "원격 디버깅"을 활성화했습니까?</li>
 <li><a href="#Adb_Helper_Add-on">ADB Helper 확장기능</a>을 사용중이라면:
  <ul>
   <li><code>adb forward</code> 명령을 성공적으로 실행했습니까?</li>
  </ul>
 </li>
 <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar:
  <ul>
   <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li>
   <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li>
  </ul>
 </li>
 <li>Linux상의 장치이름 대신 "???????"가 보이나요? 퍼미션에 문제가 있습니다.  <a href="http://developer.android.com/tools/device.html#setting-up">udev 설정을 확인해 보십시오</a>.</li>
 <li>폰의 화면잠금이 해제되었습니까?</li>
</ul>

<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;attach_text=&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_b2g=---&amp;cf_crash_signature=&amp;cf_status_b2g18=---&amp;cf_status_b2g_1_1_hd=---&amp;cf_status_b2g_1_2=---&amp;cf_status_firefox24=---&amp;cf_status_firefox25=---&amp;cf_status_firefox26=---&amp;cf_status_firefox27=---&amp;cf_status_firefox_esr17=---&amp;cf_status_firefox_esr24=---&amp;cf_tracking_b2g18=---&amp;cf_tracking_firefox24=---&amp;cf_tracking_firefox25=---&amp;cf_tracking_firefox26=---&amp;cf_tracking_firefox27=---&amp;cf_tracking_firefox_esr17=---&amp;cf_tracking_firefox_esr24=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_relnote_b2g=---&amp;comment=&amp;component=Developer%20Tools%3A%20App%20Manager&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-720=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-781=X&amp;flag_type-787=X&amp;flag_type-791=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-802=X&amp;flag_type-803=X&amp;flag_type-809=X&amp;flag_type-825=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Firefox&amp;qa_contact=developer.tools%40firefox.bugs&amp;rep_platform=x86&amp;requestee_type-203=&amp;requestee_type-41=&amp;requestee_type-5=&amp;requestee_type-607=&amp;requestee_type-748=&amp;requestee_type-781=&amp;requestee_type-787=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">file a bug</a>.</p>