Developer Edition 41: View source in a tab, screenshot elements, HAR files, and more

When we introduced the new Performance tools a few weeks ago, we also talked about how the Firefox Dev Tools team had spent a lot of time focusing on user feedback and what we call ‘polish’ bugs – things reported via our UserVoice feedback channel and Bugzilla. Even though the Firefox 41 was a short release cycle for us, this focus on user feedback continues to pay off — several new features that our community had been asking for landed in time for the release. Here’s a closer look:

Screenshot the selected node in the Inspector

New contributor Léon McGregor implemented an interesting suggestion that was posted in UserVoice. This functionality has been available via the gcli ‘screenshot’ command for quite some time, but is much more discoverable and useful as a context menu item. When the screenshot is created, Firefox copies it to your configured downloads directory.

Create a screenshot of the currently selected element.

Create a screenshot of the currently selected element.

View source in tab

Starting with Firefox 41, when you right-click and select View Page Source, the html source view will open in a tab instead of a new window. This was a hugely popular request and we would have shipped it earlier but what started out as a seemingly simple change was actually quite involved: See the bug linked below for all the gory details. Importantly, we have also ensured that View Page Source provides you with the source of the page as-is from Firefox’s cache – we do not fetch a new version.

'View source' always opens in a tab now.

View Page Source always opens in a tab now.

Add Rules button

It’s very convenient to be able to add a new rule to the Inspector as you work, and this is a feature from Firebug that users have requested for some time. During this last cycle, we spent some time polishing our implementation, and provided the convenience of a UI button in addition to the context menu command.

We've added a button to the inspector so you can quickly add a new css rule.

We’ve added a button to the inspector so you can quickly add a new css rule.

“Copy as HAR” and “Save all as HAR”

Another feature from Firebug that is particularly popular with Selenium users is the ability to export HAR archives for the current page.

You can now export HAR archives directly from the network monitor.

You can now export HAR archives directly from the network monitor.

Other notable changes

In total, 140 Developer Tools bugs have been fixed in Firefox since June 1st. On behalf of the team, I’d like to thank all of the people who reported bugs, tested patches, and spent many hours working to improve this version of Firefox Developer Edition, and especially these contributors that fixed bugs: edoardo.putti, fayolle-florent, 15electronicmotor, veeti.paananen, sr71pav, sjakthol, ntim, MattN, lemcgregor3, and indiasuny000. Thanks!.

  • Bug 1164210 – $$() should return a true Array
  • Bug 1077339 – Display keyboard shortcuts when hovering panel tabs
  • Bug 1163183 – Show HTML5 Forms pseudo elements in the rule view
  • Bug 1165576 – Netmonitor theme refresh
  • Bug 1049888 – Make the storage actor work in e10s and Firefox OS
  • Bug 987365 – Add pseudo-class lock options to rule view
  • Bug 1059882 – Frame selection command button should be visible by default
  • Bug 1143224 – Opening the netmonitor slows down requests on the page
  • Bug 1119133 – Keyboard shortcut to toggle devtools docking mode between last two positions
  • Bug 1024693 – Copy CSS declarations
  • Bug 1050691 – Click on a function on the console should go to the debugger

Download Firefox Developer Edition 41 now. Let us know what you think and what you’d like to see in future releases. We’re paying attention.

View full post on Mozilla Hacks – the Web developer blog

Leave a Reply