New Features in Firefox Developer Tools: Episode 24

Releases have recently rolled, and there are a slew of new features coming to the developer tools in Firefox 24. Firefox 24 is currently in our alpha channel Firefox Aurora, and will hit the main release channel on September 17th, 2013.

A little alitteration leads to lots of cool features coming this release. I’m only touching on a few highlights here; to see a comprehensive list of all the new changes to developer tools, check out the full list of bugs fixed since last release.

Console Clean Ups

An oft-requested feature, the console will now clear all of the existing logs when you refresh the page. If you need logs to persist across reloads, don’t worry: this behavior is toggle-able in the options panel. Here’s to less clutter!

Users were also reporting that the “clear” button was confusing. It wasn’t obvious whether it was clearing the logs or the the filter text because the button as adjacent to the filtering search box. We moved it to so that this won’t happen anymore!

New position of the clear button

Source Map Sourcery

Source maps are now enabled by default. If you need to debug the JavaScript generated by your tool or compiler rather than the original source, you can still toggle them on and off in the debugger options.

Furthermore, because of issues with Internet Explorer, the source map specification was updated so that you link a source map to its script with //#
sourceMappingURL=...
rather than the deprecated //@ sourceMappingURL=.... We will still respect the old style, but will warn you that it is deprecated. Here is a summary of the why this change was made.

Finally, we will load the text of a source mapped source from its source map’s sourcesContent property, if it exists. This property was added to source maps to enable dynamic source map creation, and to bundle your sources into the source map so that you don’t need to juggle extra files on your server.

Debugger Developments

Frozen, sealed, and non-extensible objects are now visually distinguished in the debugger’s variables view.

Frozen, sealed, and non-extensible objects

Also, when stepping out of a stack frame in the debugger, you will now see either the return value or the exception thrown (depending on why you are exiting the frame) in the variables view labeled <return> and <exception> respectively.

A stack frame's return value

A stack frame's exception

JavaScript-Free Fun

Need to see how your web page gracefully degrades when JavaScript is disabled? Head on over to the options panel and you can quickly disable JavaScript for the current tab. This persists until either you close the tab or the developer tools.

Network Monitor Magic

You can now filter by types of requests in the network monitor. Want to see only requests for stylesheets? Or maybe only XHRs? We’ve got your back. On top of that, there are now total number of requests, file sizes, and response times listed in the bottom that update with you filters, so you can see just how many KBs (or even MBs) of images you are requesting on every page load.

Filtering only images

Profiler Pleasantries

You can now control the profiler from your web app’s code base via console.profile() to start a new profile, and console.profileEnd() to end it. No more trimming your sample range, start and stop profiling in the exact places you want to from your code!

That’s it for this episode. Keep on hacking the free web!

About Nick Fitzgerald

Nick hacks on the Firefox Developer Tools and the SpiderMonkey JavaScript engine. He is also a co-author of the source map specification, and blogs infrequently at fitzgeraldnick.com and you can find him on IRC as fitzgen.

More articles by Nick Fitzgerald…

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]…


11 comments

  1. Skoua

    I don’t know if it’s your goal but I’m looking forward to the day I don’t have to open Firebug anymore as it’s really slow compared to these new dev tools.

    Thanks for the good work!

    July 1st, 2013 at 14:56

    1. Nick Fitzgerald

      What features are you missing?

      Help us help you: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools

      Or help yourself: https://wiki.mozilla.org/DevTools/GetInvolved

      :)

      July 1st, 2013 at 16:10

    2. Simon Lindholm

      Luckily, Firebug is also becoming faster.

      1.12 won’t activate the debugger for the console panel (making Firebug mostly snappy with disabled script panel): http://code.google.com/p/fbug/issues/detail?id=4978
      2.0 will switch to the same debugger APIs that Firefox’s devtools are using: http://code.google.com/p/fbug/issues/detail?id=5421
      And the HTML panel switched to mutation observers in 1.12: http://code.google.com/p/fbug/issues/detail?id=6177

      July 1st, 2013 at 17:16

  2. yurnmehere

    Will there be the ability to track websockets?

    July 1st, 2013 at 15:34

    1. Nick Fitzgerald

      There are plans!

      Follow along here: https://bugzilla.mozilla.org/show_bug.cgi?id=885508

      July 1st, 2013 at 16:08

  3. Bob

    Good work guys!

    Is there an extra trick to get source maps in Firefox Developer Tools to work?

    I have this TypeScript project where I have added a debugger; statement in the code and generated the production JS and map file.
    I have checked the “Show original sources” item in the debugger configuration menu, but still the debugger enters the JS file when the debugger; statement is reached.

    This works fine in Chrome Dev Tools so the files should be there

    Thanks!
    Bob

    July 2nd, 2013 at 03:05

  4. Bob

    Reply to my previous post

    I guess this is related,
    https://bugzilla.mozilla.org/show_bug.cgi?id=870140

    July 2nd, 2013 at 04:35

    1. Nick Fitzgerald

      Hey Bob!

      I think this is a new bug we don’t have on file yet. What release are you on? Would you mind creating a small test case or steps to reproduce and filing a bug?

      https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Debugger

      Thanks!

      July 2nd, 2013 at 08:51

  5. Bob

    done, https://bugzilla.mozilla.org/show_bug.cgi?id=889492

    July 2nd, 2013 at 11:37

  6. Luke

    Those are great features, but I’ve been especially looking forward to the devtools-api documentation, and/or the highlighter api mentioned in this answer:
    http://stackoverflow.com/questions/17120754

    With more documented APIs, we could hope to see some of those handy Firebug-addons switch over to Firefox.

    Thanks for the great progress on these tools, looking forward to 23 & 24!

    July 2nd, 2013 at 20:55

  7. Bart

    Really nice article. I need to start use this development tools for FF. Thanks

    July 4th, 2013 at 03:18

Comments are closed for this article.