Box model highlighter, Web Console improvements, Firefox OS HUD + more – Firefox Developer Tools Episode 30

Firefox 30 was just uplifted to the Aurora release channel, so let’s take a look at the most important DevTools changes in this release.


One of our most requested features has been to highlight box model regions of elements on the page. We are happy to report that this feature has landed in Firefox 30. One of the great things is that the colors of the box model highlighter match the box model diagram found in the right pane of the inspector more clearly than before.

Check out the inspector documentation to read more about the new functionality, or just see the screenshot and short video below:

Inspector box model highlighter

There is a new font family tooltip to the CSS rule view. Hover over a font-family value to see an inline preview of the font. (development notes)

Inspector font family preview

Web Console

There are some big improvements in the web console to help view and navigate output.

Sample console output

Highlight and jump to nodes from console

Running the cd() command in the console switches the scope between iframes. Read more in the cd command documentation. (development notes)

Console cd() command

You can read more from Mihai about the ongoing changes to the web console. He has also been documenting the web console API for extension authors.

Firefox OS

The network monitor is now working with Firefox OS. (development notes)

There is now memory tracking (development notes) and jank tracking (development notes) in the Firefox OS Developer HUD. You can read much more about jank (aka “event loop lag”) in Paul’s Firefox OS: tracking reflows and event loop lags.

Firefox OS Developer HUD

Network Monitor

The Network Monitor has a new look to go along with some new features:

  • The design of the network timeline has been updated, which has actually improved scroll performance on the panel. (development notes)
  • Hovering over a request with an image response now shows a popup with the image. (development notes)
  • Network requests with an image response now display a thumbnail near the file name. (development notes)

Network Monitor Timeline UI

Network requests with a JSON-like response will show an object preview, even if the response type is plain text. (development notes)

JSON Response in Network Monitor


There is new behavior for console shortcut key (cmd+alt+k or ctrl+shift+k). It now focuses the input line in web console at all times, opening the toolbox if necessary but never closing it. There are more details about this change on robcee’s blog. (development notes)

To save some space on the top toolbar, there are now options to hide command buttons, like Scratchpad. The only buttons enabled by default now are Inspect Element, Split Console, and Responsive Mode. More information about this change on the devtools mailing list. (development notes). To enable Scratchpad, Paint Flashing, or Tilt, just click on the checkbox in the options panel.

Enabling Command Buttons on Toolbar

We would like to give a special thanks to all 46 people who contributed patches to DevTools this release! Here is a list of all DevTools bugs resolved for Firefox 30.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here or get in touch with the team at @FirefoxDevTools.

View full post on Mozilla Hacks – the Web developer blog

2 thoughts on “Box model highlighter, Web Console improvements, Firefox OS HUD + more – Firefox Developer Tools Episode 30

Leave a Reply