Firefox Developer Tools work week wrap-up

Last week in Sunnyvale we had the first Developer Tools work week to include the recently-integrated Jetpack team ( for a slightly different take on the week, see Paul’s post. ). And what a week! I was a bit shocked by how many things I thought were just interesting ideas suddenly became real things that actually worked. By Friday morning we had some amazing demos from the team, which I will try to group together according to theme:

Remote everything, everywhere.

Within the next 3 months we will land remote protocol support for all of the development tools we ship. The remote protocol is a network client/server protocol that exposes the developer tools to each other external tools like editors as well as Firefox on Android and Firefox OS. We had some awesome demos that leverage or extend these capabilities:

  • Based on Heather Arthur’s work on implementing remote style editing, Paul Rouget amazed us and soon many others with remote CSS editing from popular editor Sublime Text 2: (Tweet, Youtube, Github).
  • Joe Walker showed off how to run gcli commands remotely between different instances of Firefox Desktop.
  • Jim Blandy walked us through some important platform fixes that will enable content process debugging on Firefox OS. This will allow us to support remote on-device debugging of B2G apps.

Revolutionary Dev Tools hacks

Many team members got a ton of work done on their existing projects and showed us some great enhancements by the end of the week:

  • Mihai Sucan showed off progress on the Global Console, which now understands all network requests and also supports stdin/stdout and some handy timing utilities.
  • Anton Kovalyov showed off an initial integration of Codemirror as the source editor for the devtools, replacing the current Orion editor.
  • Nick Fitzgerald got sourcemaps working with the debugger and gave us a demo of Coffeescript debugging.
  • Joe Walker re-factored gcli commands to de-couple processing from presentation, making it much easier to implement multiple commands that use a common data formatter.
  • Last but not least, Victor Porov walked us through a fully-operational Network Panel that is nearly ready to land!
  • Stephen Shorlander showed off some great first steps on defining what in-browser web app development might look like.

Developer tools + Jetpack == Super Powers!

On Tuesday Paul Rouget walked us through the fledgling developer tools API and challenged the Jetpack team to see how working with the developers could be made simpler. By Friday Irakli answered the challenge by showing us a Jetpack add-on called ‘Add-on Pad’ for live-coding SDK-based add-ons.

Dave Camp had a slightly different take on Jetpack’s possibilities and by the end of the week was able to show off a version of the Developer Tools code-base that could be dynamically re-loaded from disk using Jetpack’s CommonJS loader, without the need to re-build or even restart Firefox.

Not to be outdone, Dave Townsend made some tweaks to tilt mode to expose it to add-ons and even scratchpad hacks to change how tilt visualizes a page based on arbitrary code that could be injected either via an add-on or from scratchpad.

Paul also released a new version of his excellent Firefox Terminal add-on recently which you should go install it immediately! Right now! I’ll still be here when you get back.

Add-on developer love

The developer tools team has been focused like a laser on improving life for web developers, but Firefox itself is created and extended with web technologies like JS and CSS. At this first Devtools work week that included the Jetpack team we saw some really promising work:

  • Eddy Bruel tackled several bugs I don’t completely understand and by the end of the week showed us debugging for almost all browser chrome and add-on Javascript code. There are still some known limitations to work through ( not all add-ons or content scripts can be debugged currently ) but the Browser is already very useful to developers as of today’s Nightly build.
  • Mihai Sucan and Alexandre Poirot made changes to both the SDK and the Global Console that will pipe any calls to console.log in Jetpack code to the Global Console, greatly improving ‘printf’-style debugging for add-on developers.

Some of these hacks landed last week during the work week, many will be landing over the next couple weeks. If you’d like to get involved in driving these features home, find us in #devtools and #jetpack on irc.mozilla.org or the Developer Tools project mailing list at mozilla.dev.developer-tools.

About Jeff Griffiths

Jeff is Product Manager for the Firefox Developer Tools and occasional Open Web hacker, based in Vancouver, BC.

More articles by Jeff Griffiths…

About Robert Nyman [Editor emeritus]

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.

More articles by Robert Nyman [Editor emeritus]…


21 comments

  1. Michael Bashkirov

    What is the UI theme on http://i.imgur.com/FldgNq0.png ?
    Can I use it?

    March 20th, 2013 at 07:04

    1. Jeff Griffiths

      Sure, this is the OS X flavour of the new Australis theme the Firefox team is currently working on. For more info on. You can try out this theme by downloading a ‘UX’ Nightly build from here:

      http://people.mozilla.org/~jwein/ux-nightly/

      For more on what exactly the UX builds are, you should read Jared Wein’s post:

      http://msujaws.wordpress.com/2012/03/15/mozillas-ux-nightly-build-of-firefox/

      March 20th, 2013 at 09:18

  2. Omega X

    Still waiting on a decent timeline function.

    March 20th, 2013 at 12:49

    1. Jeff Griffiths

      Victor showed us a really polished version last week, we hope to land it in the next couple of weeks. Sorry, I didn’t have a screenshot of it on hand but it exists!

      March 20th, 2013 at 13:32

      1. Omega X

        Excellent! I look forward to it.

        March 23rd, 2013 at 03:34

  3. WebDev

    Will Firefox have integraded inspector for Web Storage, IndexedDB, and Application Cache? I think that it can be very helpful feature.

    March 20th, 2013 at 20:44

    1. Jeff Griffiths

      This is definitely a popular request, but there is nothing planned in the next month or two. Thanks for your feedback, hearing this particular request helps the team prioritize it when weighing what to focus on.

      March 20th, 2013 at 20:59

  4. aL3xa

    I think I’ll get into memes because of my constant rants on autocompletion. Paul Roget did respond on one of my previous rants that it’s a “work in progress”. Any rough estimates on when it may land in Nightly?

    March 21st, 2013 at 06:29

    1. Jeff Griffiths

      Hi aL3xa,

      Paul Rouget is correct, we have a work in progress but nothing close to landing right now.

      March 21st, 2013 at 15:48

  5. Aras

    This is pretty awesome and exciting. Is the CSS live edit dependant on sublime text or can it be used with other editors as well? I use vim and would love to incorporate something live that in my workflow. Great work!

    March 21st, 2013 at 15:47

    1. Jeff Griffiths

      Aras: the idea for this project is to create a Python library as a reference implementation – Paul has already hacked on support for Vim as well although he mentioned at the work week that it is slow due to Vim being single threaded. I would love to see great support in a wide variety of editors come from the community, hopefully inspired by our open approach to developing the remote protocol.

      March 21st, 2013 at 15:51

  6. River Cities Media

    This is pretty sweet. I always love digging in to new developer tools.

    March 22nd, 2013 at 01:36

  7. Brant Watson

    I am wondering why all this focus is put into making lateral tools. In many ways I prefer Firefoxs’ built-in tools over Firebug and others, but the fact that it is restricted to being a lateral interface annoys me. Todays monitors are widening their aspect ratio, but a lot of content is still vertical. This means wasted space on the left and right sides of a browser. At one point I had a mod that gave me side tabs, and that actually worked wonderfully.

    Firebug allows me to position the developer tools on the left or right side of the screen instead of taking the whole horizontal real-estate. This is invaluable for interacting with a page whilst looking at JS console output, and other information. The problem with the horizontal layout is that to display a resonable amount of debugging data, I need to use a lot of my vertical real-estate which prevents me from utilizing the site itself the way way I normally would, which makes testing a pain at times.

    Are there any plans to better utilize this wasted space?

    March 25th, 2013 at 07:16

    1. Jeff Griffiths

      In the current Aurora builds you can flip a preference in about:config to enable the devtools toolbox to appear in the side as opposed to the bottom:

      https://www.evernote.com/shard/s1/sh/42072ede-b716-43fe-a768-22cebfbedde4/9330a9938b5f595e756b3ef2a7254460

      This is a work in progress, but for me is already an improvement with large monitors!

      March 25th, 2013 at 10:46

      1. Brant Watson

        Fantastic! Thats what I get for lacking knowledge in this regard. Thank you very much for pointing this out to me, I appreciate it greatly.

        March 25th, 2013 at 11:42

      2. Pablo Olmos de Aguilera C.

        A couple of versions before (i believe) the css would appear at the right and inspector and all below. I see that that I can put it on the right, but I really liked the previous behaviour… it’s some way to replicate it?

        April 8th, 2013 at 17:35

  8. Costa Michailidis

    Really awesome stuff! Is the in-browser editor in the works for firefox 21?

    March 25th, 2013 at 10:28

    1. Jeff Griffiths

      No, Firefox 21 is about to go into Beta and these changes have not yet landed on nightly ( currently Firefox 22, soon Firefox 23 ).

      March 25th, 2013 at 10:31

  9. Rugby

    Adobe Brackets allows to live edit websites using Chrome.

    March 29th, 2013 at 07:21

    1. Jeff Griffiths

      That’s true, and the Brackets team is doing great work, hopefully well see support for Firefox as well. What I’d like to see is this sort of live editing functionality in a wide array of text editors: vim, Komodo, ST2, eclipse, Brackets, whatever.

      March 29th, 2013 at 11:05

  10. RobertCZ

    Sorry if it’s a dumb question but I can’t figure out how to configure console to clear after reload – is it possible?
    Otherwise – current nighly is impressive, I’m starting to use it daily instead of Firebug and it’s quite close for me (the panel-on-the-right feature is awesome)

    April 11th, 2013 at 00:37

Comments are closed for this article.