By
Firefox 25 was just uplifted to the Aurora release channel which means we are back to report about new features in Firefox Developer Tools.
Here’s a summary of some of the most exciting new features, and to get the whole picture you can check the complete list of resolved bugzilla tickets.
Black box libraries in the Debugger
In modern web development, we often rely on libraries like JQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. To alleviate this problem, we introduced black boxing: a feature where you can tell the debugger to ignore the details of selected sources.
To black box a source, you can either mark them one at a time by disabling the little eyeball next to it in the sources list:
Or you can black box many sources at once by bringing up the developer toolbar with Shift+F2 and using the dbg blackbox command:
![dbg blackbox --glob *-min.js[source]](https://hacks.mozilla.org/wp-content/uploads/2013/08/command.png)
When a source is black boxed:
- Any breakpoints it may have are disabled.
- When “pause on exceptions” is enabled, the debugger won’t pause when an exception is thrown in the black boxed source; instead it will wait until (and if) the stack unwinds to a frame in a source that isn’t black boxed.
- The debugger will skip through black boxed sources when stepping.
To see this in action and learn more about the details, check out the black boxing screencast on YouTube.
Replay and edit requests in the Network Monitor
You can now debug a network request by modifying headers before resending it. Right-click on an existing request and select the “resend” context menu item:
Now you can tweak the HTTP method, URL, headers, and request body before sending the request off again:
CSS Autocompletion in the inspector
Writing CSS in the inspector is now much easier as we enabled autocompletion of CSS properties and values.
What’s more, it even works on inline style attributes
Aside: this feature was implemented by contributors Girish Sharma and Mina Almasry. If you want to take your tools into your own hands too, check out our wiki page on how to get involved with developer tools.
Execute JS in the current paused frame
One request we’ve heard repeatedly is the ability to execute JS from the webconsole in the scope of the current paused frame in the debugger rather than the global scope. This is now possible. Using the webconsole to execute JS in the current frame can make it much easier to debug your apps.
Edit: The webconsole has actually been executing in the current frame since Firefox 23, in Firefox 25 the scratchpad will execute in the current frame as well.
Import and export profiled data in the Profiler
Hacking on a shared project and think you found a performance regression in some bit of code owned by one of your friends? Don’t just file a github issue with steps to reproduce the slowness, export and attach a profile of the code that shows exactly how much slowness there is, and where it occurs. Your friend will thank you when he or she is trying to reproduce and debug the regression. Click the “import” button next to the start profiling button to load a profile from disk, and hit “save” on an existing profile to export it.
When can I use these features?
All of these features and more are available in the Aurora release channel. In another 12 weeks, these features will roll over into Firefox stable.
Have some feedback about devtools? Ping @FirefoxDevTools on Twitter, or swing by #devtools on irc.mozilla.org.
About Nick Fitzgerald
I like computing, bicycles, hiphop, books, and pen plotters. My pronouns are he/him.
More articles by Nick Fitzgerald…
About Chris Heilmann
Evangelist for HTML5 and open web. Let's fix this!
37 comments