1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
---
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>
|
