Mozilla Foundation unveils dev tools

The good folks at the Mozilla Foundation have unveiled an amazing suite of Web-development tools. Wired's Webmonkey has a great summary:

The most popular request, and by far the coolest of the bunch, is the ability to do live edits in the text editor of your choice — effectively controlling Firefox with your editor. The video below shows an example of live editing via the popular Sublime Edit. This would essentially eliminate the need to jump from your editor to the browser, hit refresh, jump back to your editor, and so on. A dance that most of us are all too familiar with. Perhaps the best part, Rouget says this will work with the mobile version of Firefox as well.

Mozilla is also working on the opposite idea — authoring in the browser. That means putting an editor inside Firefox’s Dev Tools suite. Thus far this idea is less fleshed out, but the possibilities include putting in something like jsFiddle or perhaps a more traditional file-based editor.

Other new tools include some catch up features that bring Firefox’s Dev tools up to speed with what you’ll find in WebKit browsers. Examples include a new network panel prototype and the ability to doc the tools to the right side of the screen — great for wide monitors (this is already available in Nightly). There’s also a new “repaint” view that shows what gets repainted on the page, very useful if you’re trying to improve performance. Rouget has also been working on a new, dark theme for the Firefox dev tools.

Mozilla Shows Off Powerful New Developer Tools for Firefox



    1. While I agree authoring in the browser is rather meh. What would be useful is the ability to take the changes made in firebug to the html and css and push them back to your source editor when you want. Trying to find all the changes you made in firebug to fix a tricky UI bug can be a pain to get back into the source.

      1. Have you checked out Live Development in The idea is that your code can live in your editor, but update the browser through remote APIs. This eliminates the need for the “copy+paste dance”. Currently Brackets only supports Chrome, but hopefully FF will open up similar APIs.

      1. I love Firefox and it’s open-sourced, extension-laden goodness.  However, I don’t like the incredible bloat and slowness of the browser.  “Turn off extensions,” they say… then why use it?  If I have to pick a browser that’s just a browser, I might as well use Chrome, because it’s a *lot* faster.

        1. The “turn off extensions” remark is caused by the fact that if your Firefox is slow, one of the third party extensions you installed is probably doing it. Turning them off confirms it and then you can reactivate them, one by one, to figure out which one. It isn’t Firefox’s fault if some idiot who can barely code writes a shitty extension and you install it in your browser.

  1. CodeKit for OS X already automatically refreshes all your browsers every time you save. Plus it also does a lot of other essential stuff, like automatically compiling your LESS/SASS code into CSS every time you save, stripping the meta-data out of images to reduce their size, etc.

  2. Although I don’t use it often Chrome already has live edit (there’s some really fancy stuff when you do, say, angular.js development with JetBrains’ editor and Chrome).

    Mozilla is in a complicated place right now, what with all but one of the corporate browsers going WebKit.

    The good news is that the web standards are stable enough to make something developed for Firefox work correctly 99% of the time or better when viewed in a WebKit browser. If you are careful, it’s not hard to write pages that work correctly in just about every browser that anyone is using.

  3. the ability to do live edits in the text editor of your choice — effectively controlling Firefox with your editor

    Dreamweaver has been (basically) doing this for about a decade?  Granted, not always perfectly, that’s for sure.  But, then again, what works in Firefox, certainly doesn’t always work in other browsers and/or look the same….

    I know, I know… Dreamweaver sucks, etc. etc. at least for people who don’t realize it makes a great text editor (for the most part) in the last 5-7 years or so and know how to hack it to get SASS, etc. working properly.

  4. The open-source Brackets editor has had this functionality for almost a year:  It also automatically highlights DOM nodes that match the CSS rule your cursor is in, etc.  JetBrains’s WebStorm also has live CSS editing in its latest version.  It seems like Firefox is a little late to the party.

    Ideally, if Firefox were to be compatible with the webkit remote debugging API, then those existing tools could work with Firefox too virtually “for free”…

  5. And here I am, stuck for months on a legacy web-project that uses ActiveX controls. So: Internet Explorer.

    I see this and I look back at the IE9 “developer tools”, and I weep. Hot, viscid tears of jealousy.

Comments are closed.