Revision 639553 of WebIDE

  • 리비전 슬러그: Tools/WebIDE
  • 리비전 제목: WebIDE
  • 리비전 아이디: 639553
  • 제작일시:
  • 만든이: jryans
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

The WebIDE is only available from Firefox 33 onwards.

The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device.

However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.

With the WebIDE, you first set up one or more runtimes. 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 it could be a Firefox OS Simulator installed on the desktop itself.

Next, you create an app, or open an existing app. If you're creating a new app you 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. The 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 the WebIDE, and only use it for debugging.

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.

Opening the WebIDE

The WebIDE is currently hiding behind a preference. To make it visible visit about:config, find the preference named devtools.webide.enabled and set it to true. Now you'll see a new entry in the Web Developer menu called WebIDE. Click it and the WebIDE opens:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

Setting up runtimes

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

  • USB devices: Firefox OS devices connected over USB
  • Simulators: instances of the Firefox OS Simulator that you've installed
  • Custom: use this to connect to the WebIDE using an arbitrary name and port.

The first time you click the dropdown, you might not see any runtimes here:

The rest of this section describes how you can add some runtimes.

Connecting a Firefox OS device

Before you can connect a Firefox OS device, there's some setup you have to go through:

  • check your Firefox OS version: make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then Device Information > Software. If you don't have a high enough version, but do have a Geeksphone, check out our guide to updating your software.
  • enable remote debugging: in the Settings app on the device, go to Device information > More information > Developer . If Remote Debugging is just a simple checkbox, check it. If it asks you to enable for just ADB, or for ADB and DevTools, select "ADB and DevTools".
  • disable Screen lock on your device: in the Settings app on the device, go to Screen Lock and unchecking the Lock Screen 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.
  • Linux only: add a udev rules file, as documented in step 3 of this guide to setting up an Android device. The idVendor attribute to use for the Geeksphone is "05c6", and this page lists other idVendor values.
  • Windows only: you need to install drivers, as documented in step 3 of this guide to setting up an Android device. You can find drivers for Geeksphone devices on the Geeksphone web site. Windows 8 by default will not let you install unsigned drivers. See this tutorial on "How to install an unsigned driver on Windows 8".
  • disconnect other Android devices: make sure you don't have any other Android devices connected to your computer.

Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

Troubleshooting

If you don't see your device, here are some things you can try.

  1. enable logging:
    1. visit about:config, and add a new preference called .console.logLevel, with the string value all.
    2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
  2. ask for help: go to the #devtools room on IRC and we will try to help.
  3. edit asb_usb.ini: if the command "adb devices" shows no entries even though the phone is connected and unlocked, you may have to edit adb_usb.ini.

Adding a Simulator

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

This means that in many cases, you don't need a real device to test and debug your app.

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators, they appear as options in the Runtimes dropdown menu:

To learn more about the Simulator, see its documentation page.

Custom runtimes

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

This is convenient, but sometimes you need to manage ADB directly, because you have your own custom port forwarding, and in this case you need to set up a custom runtime. For example, you can connect a Firefox for Android device using adb, then set up port forwarding from that device, then use the port number in a custom runtime to connect WebIDE to it.

Creating and opening apps

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

Create a new app

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

Both templates are taken from the Mortar template collection, and both provide you with the basic structure you need to get started. The "Privileged App" shows how a app can use permissions to load cross-origin content.

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

Open a packaged app

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

Open a hosted app

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

Editing apps

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right:

Manifest validation

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

The source editor

The WebIDE uses the CodeMirror source editor.

Source editor shortcuts

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

Code completion

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

To display autocomplete suggestions in JavaScript press Control + Space:

Inline documentation

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

Running and debugging apps

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

  • If you select a Simulator, the WebIDE launches the Simulator.
  • If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".

Now two things are different. First, the Runtimes dropdown menu now has three extra items:

  • information on the current runtime
  • a table summarising app permissions for the current runtime, indicating, for each API and each app type, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)
  • a command to take a screenshot from the runtime

Second, the "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

Debugging certified apps

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:


However, to debug certified apps on a real device:

  • the device must be running a development build of Firefox OS 1.2+
  • you must enable certified app debugging

To enable certified app debugging follow these steps:

  1. On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:
    adb shell

    Your prompt should change to root@android.

  2. Next, stop B2G:

    stop b2g
  3. Navigate to the following directory:

    cd /data/b2g/mozilla/*.default/
  4. Update the prefs.js file with the following line:

    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    
  5. Restart B2G:

    start b2g
  6. Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

Now in the WebIDE you should see all the certified apps on the device.

 

 

리비전 소스

<div class="geckoVersionNote">
 <p>The WebIDE is only available from Firefox 33 onwards.</p>
</div>
<div class="summary">
 <p>The WebIDE is the replacement for the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Like the App Manager, it enables you to run and debug <a href="/en-US/Firefox_OS">Firefox OS</a> apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p>
 <p>However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.</p>
</div>
<p>With the 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 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_opening_apps">create an app, or open an existing app</a>. If you're creating a new app you 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. The 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 the WebIDE, and only use it for debugging.</p>
<p>Finally, you can <a href="https://developer.mozilla.org/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="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p>
<div class="note">
 <p>To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.</p>
 <p>You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.</p>
</div>
<h2 id="Opening_the_WebIDE">Opening the WebIDE</h2>
<p>The WebIDE is currently hiding behind a preference. To make it visible visit <a href="http://kb.mozillazine.org/About:config">about:config</a>, find the preference named <code>devtools.webide.enabled</code> and set it to <code>true</code>. Now you'll see a new entry in the Web Developer menu called WebIDE. Click it and the WebIDE opens:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;" />The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p>
<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p>
<h2 id="Setting_up_runtimes">Setting up runtimes</h2>
<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p>
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB</li>
 <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li>
 <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect to the WebIDE using an arbitrary name and port.</li>
</ul>
<p>The first time you click the dropdown, you might not see any runtimes here:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="width: 723px; height: 564px; display: block; margin-left: auto; margin-right: auto;" />The rest of this section describes how you can add some runtimes.</p>
<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3>
<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p>
<ul>
 <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information &gt; Software</code>. If you don't have a high enough version, but do have a Geeksphone, check out our <a href="/Firefox_OS/Developer_phone_guide/Geeksphone">guide to updating your software</a>.</li>
 <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information &gt; More information &gt; Developer</code> . If Remote Debugging is just a simple checkbox, check it. If it asks you to enable for just ADB, or for ADB and DevTools, select "ADB and DevTools".</li>
 <li><strong>disable Screen lock on your device:</strong> 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><strong>Linux only:</strong> add a <code>udev</code> rules file, as documented in step 3 of this guide to <a 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 href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li>
 <li><strong>Windows only:</strong> you need to install drivers, as documented in step 3 of this guide to <a 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 href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" 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><strong>disconnect other Android devices:</strong> make sure you don't have any other Android devices connected to your computer.</li>
</ul>
<p>Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="width: 710px; height: 562px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Troubleshooting">Troubleshooting</h4>
<p>If you don't see your device, here are some things you can try.</p>
<ol>
 <li><strong>enable logging:</strong>
  <ol start="1" style="list-style-type: lower-alpha;">
   <li>visit <a href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, with the string value <code>all</code>.</span></span></li>
   <li>In the <a 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="/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, ask for help.</li>
  </ol>
 </li>
 <li><strong>ask for help:</strong> 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.</li>
 <li><strong>edit asb_usb.ini</strong>: if the command "adb devices" shows no entries even though the phone is connected and unlocked, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
</ol>
<h3 id="Adding_a_Simulator">Adding a Simulator</h3>
<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p>
<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p>
<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="width: 720px; height: 560px; display: block; margin-left: auto; margin-right: auto;" />You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators, they appear as options in the Runtimes dropdown menu:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="width: 712px; height: 559px; display: block; margin-left: auto; margin-right: auto;" />To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p>
<h3 id="Custom_runtimes">Custom runtimes</h3>
<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p>
<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p>
<p>This is convenient, but sometimes you need to manage ADB directly, because you have your own custom port forwarding, and in this case you need to set up a custom runtime. For example, you can connect a <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android device using adb</a>, then set up port forwarding from that device, then use the port number in a custom runtime to connect WebIDE to it.</p>
<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="width: 723px; height: 562px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3 id="Create_a_new_app">Create a new app</h3>
<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="width: 739px; height: 591px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Both templates are taken from the <a href="https://github.com/mozilla/mortar/">Mortar template collection</a>, and both provide you with the basic structure you need to get started. The "Privileged App" shows how a app can use permissions to load cross-origin content.</p>
<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
<h3 id="Open_a_packaged_app">Open a packaged app</h3>
<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
<h3 id="Open_a_hosted_app">Open a hosted app</h3>
<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
<h2 id="Editing_apps">Editing apps</h2>
<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="width: 846px; height: 625px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3 id="Manifest_validation">Manifest validation</h3>
<p>The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="width: 847px; height: 626px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3 id="The_source_editor">The source editor</h3>
<p>The WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p>
<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
<h4 id="Code_completion">Code completion</h4>
<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="width: 849px; height: 628px; display: block; margin-left: auto; margin-right: auto;" />To display autocomplete suggestions in JavaScript press Control + Space:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="width: 867px; height: 653px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Inline_documentation">Inline documentation</h4>
<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="width: 872px; height: 652px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p>
<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
<p>When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
<ul>
 <li>If you select a Simulator, the WebIDE launches the Simulator.</li>
 <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
</ul>
<p>Now two things are different. First, the Runtimes dropdown menu now has three extra items:</p>
<ul>
 <li>information on the current runtime</li>
 <li>a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
 <li>a command to take a screenshot from the runtime</li>
</ul>
<p>Second, the "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="width: 1314px; height: 718px; display: block; margin-left: auto; margin-right: auto;" />To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="width: 1310px; height: 688px; display: block; margin-left: auto; margin-right: auto;" />Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p>
<h3 id="Debugging_certified_apps">Debugging certified apps</h3>
<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="width: 1302px; height: 681px; display: block; margin-left: auto; margin-right: auto;" /></p>
<p><br />
 However, to debug certified apps on a real device:</p>
<ul>
 <li>the device must be running a development build of Firefox OS 1.2+</li>
 <li>you must enable certified app debugging</li>
</ul>
<p>To enable certified app debugging follow these steps:</p>
<ol>
 <li>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:
  <pre class="brush: bash">
adb shell</pre>
  <p>Your prompt should change to root@android.</p>
 </li>
 <li>
  <p>Next, stop B2G:</p>
  <pre class="brush: bash">
stop b2g</pre>
 </li>
 <li>
  <p>Navigate to the following directory:</p>
  <pre class="brush: bash">
cd /data/b2g/mozilla/*.default/</pre>
 </li>
 <li>
  <p>Update the prefs.js file with the following line:</p>
  <pre class="brush: bash">
echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' &gt;&gt; prefs.js
</pre>
 </li>
 <li>
  <p>Restart B2G:</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>
</ol>
<p>Now in the WebIDE you should see all the certified apps on the device.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
현재 리비전 복원