Toolbox, Inspector & Scratchpad improvements – Firefox Developer Tools Episode 32

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.

Toolbox

We’ll start out the list with a couple of features that were requested on the new UserVoice feedback channel that we are trying out.

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)

Screenshot of node dimensions being shown in the infobar above the box model highlighter

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)

Screenshot of the new Inspect Element position on the left side of the toolbox

There is now a ‘full page screenshot’ command button. After enabling this button, just press it and a screenshot will appear in your downloads folder. (development notes)

Screenshot of taking a screenshot of the current page with DevTools

A demonstration of the screenshot can be seen in the animated gif below:

Animated gif of taking a screenshot of the current page with DevTools

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.

Screenshot of the new web audio tool

Inspector

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)

Screenshot of viewing user agent styles in the Inspector Panel

Animated gif of viewing user agent styles in the Inspector Panel

Hidden nodes are now displayed differently from visible nodes in the markup view. (development notes & UserVoice request)

Screenshot of hidden nodes being displayed differently in the Inspector panel

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)

Screenshot of a web font being previewed in the Inspector panel

There is now a ‘Paste Outer HTML’ context menu entry for nodes in the markup view. (development notes & UserVoice request)

Scratchpad

There is now type-inference based code completion for JavaScript in Scratchpad. Open a list of suggestions at your current cursor position with 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)

Screenshot of scratchpad showing an autocompletion list

Screenshot of scratchpad showing type information about a function

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice or get in touch with the team at @FirefoxDevTools on Twitter.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply