WebIDE: A Web IDE in Firefox

| by Abel Avram Follow 9 Followers on Jun 24, 2014. Estimated reading time: 1 minute |

Mozilla has released in the nightly builds an IDE for creating, editing, running and debugging web applications on Firefox OS devices and simulators, planning to extend it to all major browsers on mobile devices.

WebIDE is built on the former Firefox OS App Manager but includes along with deploying and debugging tools a code editor based on CodeMirror and the tern.js code analysis framework. To ease development start up, developers are provided with boilerplate code based on a growing number of templates. Applications can be deployed on a real Firefox OS device across USB or WiFi, or on a simulator, currently being supported 1.3, 1.4 and 2.0 (beta).

WebIDE is integrated with all the usual Firefox debugging tools enabling live editing of apps. The following snippet shows editing the footer of the Homescreen application, making its min height larger, the change appearing on the simulator immediately:


Besides managing runtimes, WebIDE validates applications and their manifest files. For those interested in using their preferred code editor, an API is available to connect from an external editor to WebIDE in order to access runtimes and application validation, as explained in a Mozilla post:

You can use a simple API which allows external editors to access all the advanced functionality of the tool – its runtime management, pushing applications to different devices and connecting Firefox Developer Tools. You can turn off our internal editor and leave WebIDE with a simple, clean interface for managing runtimes and validating applications. We want to make it easy for users of any code editor to sling their code around to various devices.

WebIDE does debugging over the Firefox Remote Debugging Protocol, and Mozilla plans to extend this protocol to work with other mobile browsers – Chrome for Android, Safari for iOS, and possibly others later – through a number of adapters.

Among others, Mozilla is working on adding a Firewatch-like performance monitor for tracking memory consumption, more simulators and PhoneGap support.

Currently WebIDE is available in Firefox Nightly and it has to be enabled turning the devtools.webide.enabled preference in about:config.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Google is working on something like this by niu tech

It's called Chrome Dev Editor, it works in Chrome and it's based on Spark IDE. You can get it here:

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you