Mozilla

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.

Readability app open in WebIDE

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.

Editing in WebIDE

While working with your web application manifest, the application validator will help you find common problems before submitting to the marketplace.

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.

Packaged App Demo in WebIDE

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

You can see the WebIDE in action in this screencast

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:

Enabling WebIDE in Firefox Nightly

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.

Thanks for reading. We look forward to hearing your feedback in the comments, on our UserVoice feedback channel and on Twitter @firefoxdevtools.

72 comments

Post a comment

  1. Gregor wrote on June 23rd, 2014 at 08:23:

    Hey there, seems that the YouTube video is private?
    https://www.youtube.com/watch?v=n8c34wk4OnY

    Reply

    1. Chris Heilmann wrote on June 23rd, 2014 at 09:06:

      My bad, fixed now.

      Reply

  2. Ian Bicking wrote on June 23rd, 2014 at 08:57:

    Reading the Remote Debugging Protocol, I feel like I’m missing whatever I need to know to actually establish a connection. How do I actually get access to this protocol?

    Reply

    1. Victor Porof wrote on June 23rd, 2014 at 10:25:

      Take a look at this https://github.com/harthur/firefox-client for an example use of the remote debugging API.

      Reply

  3. Unr wrote on June 23rd, 2014 at 09:02:

    But, does it vim?

    Reply

    1. rich wrote on June 23rd, 2014 at 09:42:

      Since they’re using Code Mirror, I would assume it could be implemented.
      http://codemirror.net/demo/vim.html

      Reply

      1. Guestinator 2000 wrote on June 23rd, 2014 at 15:56:

        THat looks awesome!!!!!

        Reply

    2. Mihai wrote on June 24th, 2014 at 04:58:

      Yes it does!

      Go to about:config, and change devtools.editor.keymap to vim.

      I think it also supports emacs and sublime.

      Reply

    3. Tin Aung Lin wrote on June 25th, 2014 at 22:39:

      You can use vim keymap in both WebIED and DevTools by modifying this flag in about:config

      flag: :devtools.editor.keymap
      default: “vim”

      Have fun.

      Reply

  4. Rich wrote on June 23rd, 2014 at 09:02:

    Is this installed within the mac nightly? Its not showing in my developer menu.

    Reply

    1. Chris Heilmann wrote on June 23rd, 2014 at 09:06:

      It is – as explained in the post, it is behind a flag and you need to enable it: toggle the devtools.webide.enabled preference in about:config.

      Reply

      1. Fabio Venni wrote on June 23rd, 2014 at 09:10:

        Doesn’t show up for me either after having enabled the flag :(

        Reply

      2. Rich wrote on June 23rd, 2014 at 09:12:

        Hmm. Seems like it doesn’t show in the menu as “WebIDE” per the video, but maybe “App Manager”?

        Reply

        1. Chris Heilmann wrote on June 23rd, 2014 at 09:24:

          yes, that’s it.

          Reply

        2. Paul Rouget wrote on June 23rd, 2014 at 09:26:

          Today (monday) it appears as “App Manager”. It’s been rename to “WebIDE”, but will only appear tomorrow.

          Reply

          1. Rich wrote on June 23rd, 2014 at 09:31:

            Thanks! Sorry for the confusion.

          2. Fabio Venni wrote on June 23rd, 2014 at 09:38:

            Thanks! all sorted

  5. Mike wrote on June 23rd, 2014 at 09:14:

    I enabled webide in the about:config but it doesn’t show up in the Developer menu as WebIDE as it does in the video. Using nightly 33.0a1 (2014-06-23) on a Mac.

    Reply

    1. Caspy7 wrote on June 23rd, 2014 at 09:46:

      Per the conversation above it is called “App Manager” but in tomorrow’s nightly will start showing up as “WebIDE”

      Reply

  6. Jitendra Vyas wrote on June 23rd, 2014 at 09:51:

    Is it like a Text Editor in Browser to replace Sublime Text, Vim etc? or it’s only to make App for firefox.

    I’m already working on a app which is based on ruby on rails. Can I use Web IDE for that instead Sublime Text?

    Reply

    1. Jeff Griffiths wrote on June 23rd, 2014 at 18:11:

      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’.

      Reply

  7. Commenter wrote on June 23rd, 2014 at 10:43:

    Just wondering, is there any technical reason why you’re using CodeMirror instead of Ace?

    Reply

    1. Jeff Griffiths wrote on June 23rd, 2014 at 18:02:

      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.

      Reply

      1. Commenter wrote on June 24th, 2014 at 00:32:

        Fair enough – I was just wondering, as Mozilla still has a hand in Ace (having been based off Bespin/Skywriter). But “best tool for the job” is definitely a good reason to use CodeMirror over Ace.

        Thanks for responding!

        Reply

    2. Rob Campbell wrote on June 24th, 2014 at 11:03:

      yes.

      Reply

  8. anonymous wrote on June 23rd, 2014 at 11:40:

    So, how long till we get mail client there? :}

    Reply

  9. Irtaza Ahmed Qureshi wrote on June 23rd, 2014 at 11:52:

    An excellent thing. Just used for testing. Really very impressing. (Y) Keep It Up MDN (Y)

    Reply

  10. fvsch wrote on June 23rd, 2014 at 12:29:

    Two questions:

    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? ^^

    Reply

    1. Brian Grinstead wrote on June 23rd, 2014 at 15:20:

      1. For now, the Style Editor will give live updating while you type whereas the editor within the WebIDE will not. See this bug for information about enabling the live updating in WebIDE: https://bugzilla.mozilla.org/show_bug.cgi?id=1026674

      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.

      Reply

  11. Jhony wrote on June 23rd, 2014 at 13:01:

    Is this app only, or can we develop websites on it too?

    Reply

  12. Frustrated wrote on June 23rd, 2014 at 13:27:

    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.

    Reply

    1. Luke wrote on June 23rd, 2014 at 22:27:

      You’re assuming this will be part of the base Firefox install, not an addon or installation option.

      Reply

      1. Yelan wrote on June 28th, 2014 at 04:50:

        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.

        Reply

  13. Harry Moreno wrote on June 23rd, 2014 at 13:34:

    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.

    Reply

  14. Robert wrote on June 23rd, 2014 at 13:40:

    What happened to light fast browser? This could be a plugin. I guess we have come full circle.

    Reply

    1. Jeff Griffiths wrote on June 23rd, 2014 at 15:24:

      Firefox’s developer tools have almost no impact on browser performance unless they are open. The additional impact is mainly around download size which is relatively small.

      Reply

      1. Leo wrote on June 23rd, 2014 at 21:51:

        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.

        Reply

  15. Benjamin Atkin wrote on June 23rd, 2014 at 15:50:

    Please quit trying to make Firefox OS happen. It’s not going to happen. Firefox for the desktop shouldn’t have anything to do with Firefox OS.

    Reply

    1. g.g wrote on June 24th, 2014 at 10:03:

      Uh, but Firefox OS has already happened. :-) (In fact, so did Chrome OS on the desktop…)

      Reply

  16. Argh! wrote on June 23rd, 2014 at 19:58:

    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!

    Reply

    1. viperafk wrote on June 24th, 2014 at 16:12:

      “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!”

      The print button is extremely obvious in the new UI: http://i.imgur.com/QwAwG0i.png

      Unless you seriously think the huge button, with the printer icon, that says “print”, is hard to find?

      Reply

      1. Oğuz Çelikdemir wrote on June 24th, 2014 at 22:35:

        Is this so hard to click from hamburger menu?

        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 ).

        Reply

  17. Andrew Eisenberg wrote on June 23rd, 2014 at 20:02:

    Looks great! And looking forward to trying this out.

    How closely tied is this to Firefox OS? How will this help me create traditional web-apps? Also, do I need to install firefox nightly to try this out?

    Reply

  18. Adam wrote on June 23rd, 2014 at 20:57:

    Great tool! However, Google is developing something similar – Chrome Dev Editor as a Google Chrome app – tr.im/5mpdl

    Reply

  19. Ido wrote on June 24th, 2014 at 00:30:

    So, is Firefox slowly going the old Mozilla-Suite way? I’m not saying WebIDE doesn’t seem cool, but why add bloat? Is the common Firefox user going to need this?

    Reply

  20. really? wrote on June 24th, 2014 at 02:55:

    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.

    Reply

  21. tux. wrote on June 24th, 2014 at 02:57:

    When I started using Firefox, I loved how everything was an ENTIRELY OPTIONAL add-on.

    I wonder what went wrong.

    Reply

  22. elav wrote on June 24th, 2014 at 03:50:

    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.

    Reply

  23. Felix E. Klee wrote on June 24th, 2014 at 05:12:

    “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:

    http://stackoverflow.com/a/24373015/282729

    For Firefox Desktop I don’t even know how to do it. It’s an open question:

    http://stackoverflow.com/questions/24339502/how-to-test-privileged-packaged-apps-on-firefox-for-desktop

    Reply

  24. Stephen Price wrote on June 24th, 2014 at 08:39:

    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.

    Reply

  25. Jeffrey wrote on June 24th, 2014 at 08:43:

    Any plans for C/C++ Emscripten integration?

    That’s one thing Emscripten is missing is a good IDE officially designed for it. Like Android Studio but for Asm.js.

    Reply

  26. Christian wrote on June 24th, 2014 at 08:50:

    Can I use it on Windows?

    Reply

    1. Fred wrote on June 24th, 2014 at 16:40:

      Absolutely.

      Reply

  27. Ido wrote on June 24th, 2014 at 08:55:

    This is really starting to feel like the old Mozilla Suite. How long before Mozilla start a new, fast and lightweight browser project without all the bloat. Maybe call it Mozilla Turbodog.

    Reply

  28. João wrote on June 24th, 2014 at 09:40:

    Why do people still develop in macs? Really? You guys should use open source software, like bsd or linux.

    Reply

  29. Charles N Wyble wrote on June 24th, 2014 at 10:00:

    This is really quite cool! Ignore the various haters here. They have no idea how powerful this tool is and the ease of use it brings to the table for web developers.

    Reply

    1. Stephen Price wrote on June 24th, 2014 at 15:03:

      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.

      Glad to see an FNF type here though :D

      Reply

  30. Viswaprasath KS wrote on June 24th, 2014 at 10:21:

    Hi,

    Any plans for integrating Mozilla Appmaker(https://apps.webmaker.org/en-US/designer) so it will be very easy for us to do drag and drop instead of typing and it will be awesome.

    I would like to contribute if such opportunities are there.

    Thank you.

    Reply

  31. Axel wrote on June 24th, 2014 at 12:21:

    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)

    Reply

    1. bob wrote on June 24th, 2014 at 16:05:

      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.

      Reply

      1. Axel wrote on June 24th, 2014 at 23:06:

        cool! Well, being an OS X user on the beta channel, I don’t really feel OMTC (never heard of this, actually) ;) .

        Out of curiosity: Where do you get this info? I follow the blog and most (I think) relevant news sites, and I that went completely by me. Internal knowledge or missing sources on my part?

        Reply

        1. Tim wrote on June 25th, 2014 at 02:29:

          You can get dev news here : http://twitter.com/FirefoxNightly

          Reply

  32. Niklas wrote on June 25th, 2014 at 04:38:

    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.

    Reply

  33. iskael wrote on June 25th, 2014 at 04:38:

    WOW … it’s fantastic! >_<

    Reply

  34. Carfield Yim wrote on June 26th, 2014 at 00:48:

    I am using nightly but I am not sure how to download it, is it an addon?

    Reply

    1. zalun wrote on June 26th, 2014 at 15:30:

      Simply update the nightly (it should download itself) and restart it

      Reply

  35. JuanMa Ruiz wrote on June 27th, 2014 at 00:14:

    Hi! Sorry in nightly I can’t find dev tools.website and app manager I can’t create a project like the video.

    Reply

  36. Altfred Kayser wrote on June 28th, 2014 at 03:39:

    My themes are now updated to fully support the WebIDE: LittleFox, MicroFox, Nautipolis, Walnut and Walnut2.

    Reply

  37. Yelan wrote on June 28th, 2014 at 04:38:

    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.

    Reply

  38. shirokoff wrote on June 30th, 2014 at 00:34:

    Really like the way you are putting FFOS development process.

    PS: Any news about ZTE Open 1.3 update?

    Reply

  39. Edwin Yip | Dev of LIVEditor wrote on July 11th, 2014 at 12:24:

    I might not have been developing LIVEditor (http://liveditor.com) if this came out earlier… What I wanted is a decent code editor with real-time html and css preview…

    Reply

  40. Maxime Wack wrote on July 18th, 2014 at 09:28:

    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 !

    Reply

Post Your Comment