Guess who's back? No, this isn't the eighth track from hip-hop legend Rakim's first solo album, it's another episode of New Features in Firefox Developer Tools! Firefox 25 was just uplifted to the Aurora release channel; included were a bunch of developer tools bug fixes and improvements. This is a summary of some of the most exciting new features, you can also take a look at the complete list of resolved bugzilla tickets.
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. 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; 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 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:
Keep tuned for an upcoming screencast with more details and instructions on black boxing.
If you ever wished you could debug a network request by modifying headers before resending it, we've granted your wish. 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:
Weight of the world got you down? What's the point of it all? Why lift a finger? Well, you don't have to lift as many fingers as before, because autocompletion of CSS properties and values has landed in the inspector!
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.
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. We've implemented it! Using the webconsole to execute JS in the current frame can make it much easier to debug your apps.
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.
Now! 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.
That wraps up this episode of New Features in Firefox Developer Tools. Until next time; keep on hacking the free web!