WebIDE Lands in Nightly

Editor’s note: if you want to help test it on a recent nightly you can toggle the devtools.webide.enabled preference in about:config. The WebIDE is available today under Tools>Web Developer>App Manager and will be renamed in tomorrow’s Nightly into WebIDE.

If you’ve been following our Developer Tools series on the Mozilla Hacks blog, you’ve seen the developer tools evolve from pure inspection to a debugging environment both for web sites and apps on desktop and mobile. Today we want to introduce you to the next step of evolution: adding in-browser editing features across devices.

WebIDE

Developers tell us that they are not sure how to start app development on the Web, with so many different tools and templates that they need to download from a variety of different sources. We’re solving that problem with WebIDE, built directly into Firefox. Instead of starting from zero we provide you with a functioning blueprint app with the click of a button. You then have all the tools you need to start creating your own app based on a solid foundation. WebIDE helps you create, edit, and test a new Web application right from your browser. It lets you install and test apps on Firefox OS devices and simulators and integrates the Firefox Developer Tools for seamless debugging and inspection across those devices. This is a first step towards debugging across various platforms and devices over WiFi using open remote debugging APIs.

Getting Started

After opening WebIDE you start creating your new application with a few clicks. You choose from a set of example starter templates – and we’re working with the community to build a wide variety of additional examples. You can help creating templates by visiting https://github.com/mozilla/mortar.

Editing

Once you’ve started your project, you can edit the source files in WebIDE. Its integrated editor – based on the open source CodeMirror editor with the tern.js code analysis framework – gives you a simple but powerful editor for HTML, JavaScript, and CSS files.

While this is enough for your basic editing needs, you might want to use your own preferred editor instead. To do this 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.

Runtimes and Testing

When you’re ready to test your application, choose a runtime – we’ll install Firefox OS simulators for you or help you connect to your Firefox OS device. Once connected to a runtime, you can use the tools that you’re used to in desktop Firefox to try your application. You have the same sort of rapid iteration that makes developing for the desktop web simple – just hit Ctrl/Command+R to reload the application on your device or simulator. You can get information about the device and runtime and take screenshots.

Take a Look

While we put on some finishing touches, WebIDE is checked into Firefox Nightly but is hiding behind a pref – if you want to help test it on a recent nightly you can toggle the devtools.webide.enabled preference in about:config:

The Future: Developing for the Whole Web

At the heart of the WebIDE is the Firefox Remote Debugging Protocol. The Firefox Developer Tools team has put a lot of work into making sure all of our tools work on remote devices running over USB, but that’s really only the beginning. With WebIDE managing these connections we can use the Firefox Developer Tools – and any other tools that want to use our protocol – anywhere.

Right now this protocol is useful for Firefox Desktop, Firefox Android, and Firefox OS. But we aren’t stopping there. We’re working on a protocol adapter that will allow clients using the Firefox Remote Debugging Protocol – including the Developer Tools and WebIDE – talk to all mobile browsers, regardless of rendering engine or runtime. Our first targets are Chrome for Android and Safari on iOS.

This web-everywhere project isn’t yet ready for testing, but if you’re excited to get involved or see how it is being implemented, it currently lives at https://github.com/campd/fxdt-adapters.

If you’re building a tool and want to start playing with the protocol you can start now, developing against Firefox Desktop, Firefox Android, and Firefox OS. For information about the Remote Debugging Protocol, take a look at the documentation.

WebIDE does not support languages like ruby at this time – currently we only provide syntax highlighting for HTML, JS and CSS. If you currently use SublimeText or vim and you find ourself using WebIDE, you can enable experimental keymaps for those editors by opening about:config and set ‘devtools.editor.keymap’ to either ‘sublime’ or ‘vim’.

We chose codemirror because we felt that the features, performance and extensibility compare to others such as ace were the best choice for us. Other popular tools such as chrome devtools and Brackets use codemirror, I assume for similar reasons.

1. Provided a user makes use of the built-in editor, is there a point in having the devtools Style Editor at all?

2. Are changes to CSS values made in the Inspector saved in the original stylesheets? That would allow for a workflow such as:
a) Write some basic styles for part of a web app, a module, or an element.
b) Test in a runtime or refresh the selected runtime.
c) Inspect the result and tweak CSS properties and values from there.
d) Save CSS changes from the Inspector, *on demand*.

I understand that #2 is a technical challenge and it’s unlikely WebIDE has it. I’m mostly wondering if it’s under consideration. I know it’s been a far-fetched, often requested feature for the Firefox devtools (and the Chrome ones, and Firebug…) for ages, and one roadblock was that browsers couldn’t access the actual CSS files in most cases. Here, WebIDE does have access to the CSS files. One roadblock removed, only 2 or 3 left? ^^

2. Not yet, but as you say this is something that’s very often requested and it would lead to a very nice workflow. We still have a couple of roadblocks in place. The first being syncing between style editor and inspector: https://bugzilla.mozilla.org/show_bug.cgi?id=984880.

WHY? This solves nothing and only adds issues. Yes it’s cool. But what happened to the firefox’s original goal?? Which was to be a fast and functional browser?? All these recent changes are making things worse.

Please give me a browser. I have tools for everything else. I just want firefox like it was. There will be no good browsers if FF keeps going the path it is.

Considering Firefox has been adding other web developer tools to the base install without an option, we can only assume this won’t be any different – and will bloat the browser more with stuff hardly anyone needs.

see now here’s a problem. Why isn’t there any narration in the screencast. You missed a perfect opportunity to make a much more engaging announcement if you had simply narrated the screencast once you guys were happy with the video. Small things like this make a difference when developers decide what tools to use. Google certainly does a better job of marketing their products.

You’ have made a symbolic mockery of Firefox by including a feature that looks like a rollback to the Mozilla web suite. This looks like a cool IDE, but by bundling it you have opened up Firefox to poignant criticism about a loss of focus.

It would be interesting to see another fork of in the spirit of Phoenix that strips out all this extra stuff and just includes the bare Firefox browser, with none of the extension baggage, developer tools or web IDE, none of the social API features and other things I don’t think people want.

At this point I’m fairly sure the FF developers are just doing whatever the heck they want. No one is listening to the users. They all went to school and learned to have a roadmap. And by god they’ll follow the map even though nobody wants to go wherever the hell they’re going.

Stop with these needless additions and changes. Virtually no one wants them and even less need them. PLEASE! Just fix known issues that are neglected for eons! PLEASE! You’re all ruining the one browser a LOT of us can actually use. And trust me, that number is FAR bigger than the people who will use these additional “features” you’re adding in there.

This firefox os thing is going to be the end of it all. Please! Consider stopping and improving and building what FF was meant to be. If you have to plow on, pull the browser out for those who want just the browser.

Or better, have someone work on the user interface. After the last disastrous UI update, someone asked me where the print button had gone to. Seriously. NOONE should have trouble finding out where to print in a browser! WHAT ARE YOU GUYS DOING?? Stop it! This is me begging!

“Or better, have someone work on the user interface. After the last disastrous UI update, someone asked me where the print button had gone to. Seriously. NOONE should have trouble finding out where to print in a browser! WHAT ARE YOU GUYS DOING?? Stop it! This is me begging!”

If you are a serious frontend developer, you will understand us. We need a real browser IDE to be able to see what we are doing. As you might know, modern IDE’s, like Dreamweaver, has wysiwyg feature but it’s not working well. Thanks Firefox team for such a great tool. I am sure several IDE’s will implement Firefox WebIDE in their tool, like PhpStorm or WebStorm ( right know, they are using Chrome ).

While your browser is slowly and certainly dying you keep adding unnecessary features while reinventing the ui/ux and locking it down. Great plan.

Firefox was the way to go back in the days? What happened?

All these people who spend their time developing all kinds of features and trying to reinvent the wheel, thinking they’re innovating somehow, if at least half of them could get together one day and fix the damn memory leaks that doomed FF?

Please, fix FF first, give us back the browser we used to love, I know you’re all smart, please use your time wisely.

It would be really interesting that this IDE evolve and become an independent tool. I think Firefox is loading many extras and the Inspector tool Responsive Design, and App Manager is sufficient. In fact, if I add autocomplete for HTML, JS and JSON, could launch WebIDE as a HTML Editor or IDE apart.

“you can start now, developing against Firefox Desktop” That sounds promising. I already develop for Firefox OS, which works nicely with the simulators and with my Keon. However, pushing packaged apps to Android / Fennec is somewhat cumbersome:

Guys, this is really neat stuff, and I’m not trying to be a downer here, but as a dev that uses the Aurora dev tools everyday for work, there is a LOT more basic stability work that needs to be done to the debugger, web inspector, and css rules editor. You keep dropping all this futuristic stuff, and I like the vision, but at the same time, I can’t help think, why couldn’t you have put some of that effort into reaching feature and stability parity with Internet Explorer? There are still DOM bugs that have been open for a decade, for that matter. I, myself filed a bug about some of the debugger problems that made it into the Release channel. Yes, they’ve been fixed in Aurora, but that still has months to cycle to Release and Beta. Instead, we have a WebGL shader debugger and a WebAudio tool. Fantastic for like ~5% of devs that can get client sign off on that. The rest of us would settle for tables looking right. C’mon folks, there needs to be a serious push to got your house in order before adding three new wings. I’m saying this ‘cuz I care.

Not saying it isn’t cool, but there’s a lot more basic things that are ridiculously overdue for fixing. The DevTools team keeps putting out one “space-age wonder-widget” after another when the JS debugger still chokes on the regular after having been around for years now. It’s bad when *IE* has better tools than you do.

I really think Mozilla is doing a fantastic job moving the web forward – Firefox OS, this IDE which might change the way we develop for the web completely, and so on.

On the other hand … I also feel that the browser could use some love, too. It feels really sluggish compared to Chrome sometimes, I haven’t read an update on multiple threads for several months now, plugins still need to “do the windows thing” (restart) on installation, and that’s all anything but recent.

Keep the first, share some love to good old Firefox _browsing_ development, and you’re the perfect company ;) . (Or organization, or movement, or whatever Mozilla actually is)

They are working on user interface responsiveness. OMTC (off the main thread compositing) is already enabled in the OSX version, and coming soon in the windows version. the e10s (multi-process project) has been made a high priority, but will take a while since it requires massive changes to firefox under the hood. The new cache2 backend should be coming in the near-ish future as well, which will reduce UI hangs caused by the cache.

Other things that are being worked on that will help UI responsiveness: async css animations, async html5 video, async plugin initialization, async scrolling/panning etc…

Some of it is far off and requires a lot of changes, but they are definitely being worked on.

This is a fantastic addition for beginners. I remember reading tutorials and all trying to recommend different tools for the job but this has all a user needs to start developing for the web (+ mobile). Just consider how much easier this will make it for schools! I also like that you are putting so much love in the Cordova support and making it easier to build and debug.

I’m sorry if I misunderstand, but, is Firefox now going to become a developer IDE instead of a browser? How about you split off developer tools in a separate program and let the browser be the browser? I doubt more than 1% of your users will ever need this WebIDE.

I think a lot of people here miss the point. Yes FF is a browser, yes at the moment less that 1% of users use the dev tools, yes iOS and Android are already dominating the market…
Yet fighting google or apple head to head is not the goal (they’d lose), and they don’t want to change your web developers habits (they know you know the tools).
FFOS is made to lower the entry level for smartphones, especially in developing countries.
In the same spirit WebIDE is made to lower the entry level for webdeveloping : no sdk downloading and learning required, no cumbersome configuration or compiling or signing, no new language to learn, etc.

Have FF installed ? Buy a cheap FFOS device, plug it in, and there you’re ready to go !
It’s not here to address the one percent, it’s here to make this one percent ten or twenty. It is a great vision, thank you Mozilla for making it happen !

Comments are closed for this article.

About the Author

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City.
He regularly also blogs at http://robertnyman.com and loves to travel and meet people.