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.

About Jeff Griffiths

Jeff is Product Manager for the Firefox Developer Tools and occasional Open Web hacker, based in Vancouver, BC.

More articles by Jeff Griffiths…


10 comments

  1. Jesus Perales

    Wowww!!, dev tools for all!!

    July 8th, 2015 at 14:31

  2. Adrian

    Yea, nice! Thanks!

    July 8th, 2015 at 15:09

  3. Ivan

    Niiiice… :)
    I loved specially the ‘screenshot of node’ feature!

    One question: is there a reason when I open a (*.js|*.css) file, the source-code is not highlighted?

    I’d open a bug, but it’s sooo basic that I thought there is a good reason why it’s not implemented in Firefox until version 40 (yes, forty).

    And the most curious thing is: it works in a html with css and javascript inline, that is more difficulty to implement, imho…

    BTW, thanks for the good job…

    July 9th, 2015 at 05:34

    1. Jeff Griffiths

      Can you be more specific about where you see source code that is not highlighted? It seems to be for me, with various resources ( html, css, js ) in the various tools ( inspector, debugger, style editor, network monitor ).

      July 9th, 2015 at 11:53

      1. Ivan

        Hi Jeff,

        I talking about open (like a web page) a js file.

        Example:
        Open https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/wp-includes/js/jquery/jquery.js?ver=1.11.2 URL.

        This file is not highlighted in the browser (and even on ‘view-source:https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/wp-includes/js/jquery/jquery.js?ver=1.11.2‘)…

        In the page info it’s showed “application/x-javascript” (I’m under a proxy, and sometimes it changes the type)…

        July 10th, 2015 at 05:08

        1. Jeff Griffiths

          That’s correct, view source does not ( and never has ) syntax highlighted those files. I’ve logged a bug to track this:

          https://bugzilla.mozilla.org/show_bug.cgi?id=1183344

          July 13th, 2015 at 14:29

          1. Ivan

            Thanks Jeff.

            I’m going to bookmark the link ;)

            July 13th, 2015 at 19:18

    2. Nick Fitzgerald

      For very large files, we will disable syntax highlighting, as the editors performance drops with such files.

      July 9th, 2015 at 21:01

  4. Toby

    It appears the new view-source behavior trumps any external editor settings? I prefer to have it open in ST3, but I see toggling the view_source.tab in about:config causes it to target a new FF window, not the external editor, even though I have view_source.editor.external=true.

    July 14th, 2015 at 12:40

    1. Toby

      I see that’s logged, at least: https://bugzilla.mozilla.org/show_bug.cgi?id=1165599

      July 15th, 2015 at 13:22

Comments are closed for this article.