-

Guess who's back? No, this isn't the [eighth track][rakim-guess-whos-back] from
[hip-hop legend Rakim's first solo album][rakim-18th-letter], it's another
episode of *New Features in Firefox Developer Tools*! Firefox 25 was just
uplifted to the [Aurora release channel][aurora]; 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][complete-bug-list].

# 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][wiki-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"][debugger-settings] 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:

![](http://i.imgur.com/H2b2AwX.png)

Or you can black box many sources at once by bringing up the developer toolbar
with Shift+F2 and using the `dbg blackbox` command:

![](http://i.imgur.com/CMoULaj.png)

Keep tuned for an upcoming screencast with more details and instructions on
black boxing.

# Replay and edit requests in the Network Monitor

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:

![](http://i.imgur.com/R51T54U.png)

Now you can tweak the HTTP method, URL, headers, and request body before sending
the request off again:

![](http://i.imgur.com/Q6NDLG7.jpg)

# CSS Autocompletion in the inspector

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!

![](http://i.imgur.com/RUa24ie.png)

What's more, it even works on inline style attributes:

![](http://i.imgur.com/wGXGHZm.gif)

Aside: this feature was implemented by contributors
[Girish Sharma][Optimizer] 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][get-involved].

# 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. We've implemented it! Using the webconsole to execute JS in the current frame can make it much easier to debug your apps.

# 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.

![](http://i.imgur.com/Yb5jX6A.png)

# When can I use these features?

Now! All of these features and more are available in the [Aurora release channel][aurora]. In another 12 weeks, these features will roll over into Firefox stable.

Have some feedback about devtools? Ping [@FirefoxDevTools][twitter] on Twitter, or swing by [#devtools on irc.mozilla.org][irc].

That wraps up this episode of *New Features in Firefox Developer Tools*. Until
next time; keep on hacking the free web!

[irc]: irc://irc.mozilla.org/devtools

[rakim-guess-whos-back]: http://www.youtube.com/watch?v=QXcRMGk7v5A

[rakim-18th-letter]: http://en.wikipedia.org/wiki/The_18th_Letter

[aurora]: http://www.mozilla.org/en-US/firefox/channel/#aurora

[JQuery]: http://jquery.com/

[Ember]: http://emberjs.com/

[Angular]: http://angularjs.org/

[wiki-black-box]: http://en.wikipedia.org/wiki/Black_box

[Optimizer]: http://grssam.com/

[get-involved]: https://wiki.mozilla.org/DevTools/GetInvolved

[complete-bug-list]: https://bugzilla.mozilla.org/buglist.cgi?list_id=7492061&resolution=FIXED&classification=Client%20Software&chfieldto=2013-08-05&query_format=advanced&chfieldfrom=2013-06-25&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&product=Firefox

[debugger-settings]: https://developer.mozilla.org/en-US/docs/Tools/Debugger#Debugger_settings

[twitter]: http://twitter.com/FirefoxDevTools