Firefox 32 was just uplifted to the Aurora release channel, so let’s take a look at the most important Developer Tools changes in this release.
First, we would like to thank all 41 people who contributed patches to DevTools this release! Here is a list of all DevTools bugs resolved for Firefox 32.
Node dimensions are now displayed in the box model infobar. Similar to how other tools work, you can easily refer to the dimensions of the highlighted node directly from the infobar. (development notes & UserVoice request)
The ‘pick an element from the page’ button is now closer to the inspector tab so it is quicker to jump between them. Protip: you can also use the Ctrl+Shift+C or Cmd+Opt+C keyboard shortcuts to do the same thing. (development notes & UserVoice request)
A demonstration of the screenshot can be seen in the animated gif below:
New images are being used throughout the DevTools UI to support high pixel density displays (HiDPI), so the UI looks much sharper on these devices. Big thanks to our contributor Tim Nguyen for his hard work on these changes! (development notes)
Web Audio Editor
Joining the Shader Editor and Canvas Debugger, the Web Audio Editor is a new media tool that has landed in Firefox 32. After enabling it in the options panel, you can inspect the AudioContext graph and modify properties on AudioNodes. Stay tuned for another Hacks post very soon with more details.
User agent styles can be shown in the Inspector. Since these default styles can interact with your page styles, it is handy to see them. This can be enabled from the options panel, and there is more documentation about this feature on MDN. (development notes & UserVoice request)
Web fonts are previewable within the font inspector tooltip. When hovering a font stack, you will see the currently applied font in the tooltip (including any web fonts). (development notes)
Ctrl+Space and type information about the current symbol can be shown with
Shift+Space. It is being powered by the excellent tern code-analysis engine. (development notes)
View full post on Mozilla Hacks – the Web developer blog