Setting up runtimes

A runtime is an environment in which you'll run and debug the app, such as a web browser. A runtime could be:

• an instance of Firefox, either the desktop version or an instance of Firefox for Android running on a phone
• a device running Firefox OS, or a Firefox OS Simulator installed on the desktop
• a different browser engine, such as Google Chrome or Safari, running on the desktop or a mobile device.

In WebIDE, you'll use the sidebar on the right to manage runtimes:

In this sidebar runtimes are grouped into four types:

USB DEVICES

Firefox OS devices connected over USB. From Firefox 36 this also gets you connected to Firefox for Android over USB.

WI-FI DEVICES

Firefox OS devices connected over Wi-Fi. New in Firefox 39.

SIMULATORS

Instances of the Firefox OS Simulator that you've installed.

OTHER

Remote runtimes to connect WebIDE to an arbitrary host and port. If you have the Valence add-on installed, this section will also list the additional runtimes it enables.

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

Connecting a Firefox OS device

If you have a sufficiently recent version of Firefox and Firefox OS, you can connect the Firefox OS device over WiFi. Otherwise, you must connect over USB.

• how to connect over USB
• how to connect over WiFi

Connecting to Firefox for Android

Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". From Firefox 42 onwards, you can connect to Firefox for Android over Wifi.

• how to connect over USB
• how to connect over WiFi

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 doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes sidebar, 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 may take a few minutes to download.

Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes sidebar:

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

Configuring Simulators

Starting in Firefox 42, next to each Simulator listed in the sidebar you'll see a settings icon:

Click it, and you'll see a screen enabling you to configure the Simulator:

You can:

• name this entry
• point it to a custom Desktop B2G build
• point it to a custom Gaia profile
• make this Simulator simulate a specific device and screen size

Other runtimes

Remote runtime

With a remote 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, 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 in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command (example: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).

If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward (example: localhost:6000).

Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB prior to Firefox 36.

Valence-enabled runtimes

If you have the Valence add-on installed, you'll see three additional runtimes:

• Chrome on Android
• Safari on iOS
• Chrome Desktop

For instructions on how to connect to these runtimes, see the relevant entry in the Remote Debugging page.

Selecting a runtime

Once you've set up a runtime you can select it using the Runtimes sidebar.

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

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