Mozilla Hacks

Trainspotting: Firefox 41

By Potch

Posted on September 29, 2015 in Featured Article, Firefox, Firefox Releases, and Trainspotting

Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

Firefox 41 (the Fire-y-est Fox to date) brings a bevy of new and improved features for browser users and web developer audiences. Let’s take a look at some highlights.

For a full list of changes and additions, check out the Firefox 41 release notes.

Screenshot a single element

Need to capture just one bit of a web page? Using the Inspector panel, you can now screenshot the area of a page contained by a single element:

Right click on a node in the markup view.

The result is a snapshot cropped to perfection:

Resulting Screenshot of an element on the page.

Connection status

The navigator.onLine API, historically, wasn’t all that useful. Pages could only inquire whether Firefox itself was in a specific “Work Offline” state, regardless of whether the computer had any network connection. Now, navigator.onLine uses system network information to mirror the state of the device’s Internet connection!

See the Pen QjGoRP by Potch (@potch) on CodePen.

Clipboard management

Copying text on behalf of the user used to be the hardest problem in computer science. Web developers would have to embed a Flash widget on the page just to put some text in the user’s clipboard. No more! Developers can now copy text to a users’ clipboard programmatically directly in JavaScript, provided the user takes an explicit action such as clicking a button.

Read the Hacks Post on clipboard manipulation for more details.

Network Panel HAR exports

We should rename the Network Panel to Hagar, because it’s now HAR-able! HAR is a network request archive format used by many performance and request analysis tools, and it’s now possible to export HAR information from the Network panel from the context menu.

The location of the Save As HAR option in the context menu.

<picture> perfect

In a previous edition of Trainspotting, I provided the following caveat about responsive image support in Firefox:

Responsive images will load using the correct media queries, but presently do not respond to viewport resizing. This bug is being actively worked on and tracked here, and will be fixed in a near-future version of Firefox.

Well, that near-future version is this now-present version! Responsive images will now respond to post-load changes to the page’s viewport. Isn’t it nice when a plan comes together!

There couldn’t possibly be more…

…But there most definitely is. There’s plenty of additional information in the Developer Release Notes or, for large <table> enthusiasts, the full list of fixed bugs.

Keep on rocking the Free Web!

About Potch

Potch is a Web Platform Advocate at Mozilla.

More articles by Potch…

17 comments

  1. Fabio Beneditto

    Nice tricks :)

    September 29th, 2015 at 09:20

  2. MT

    “Screenshot a single element” feature does not account for actual DPI.

    So, e.g., on a 4K monitor with 200% system-level scale, screenshot is 4x smaller (like if system-level scale was 100%) than it’s actually seen on the page.

    September 29th, 2015 at 10:44

    1. Potch

      You’re right- this seems like a bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1209773 as a result.

      September 29th, 2015 at 15:12

      1. MT

        Thanks, Potch.

        September 29th, 2015 at 15:19

    2. Joe Zim

      I was doing this on a normal 1600×900 monitory and was still having issues with the right edge being cut off a little.

      September 30th, 2015 at 06:53

      1. en45masao

        I have the same problem on my environment.

        It seems that “the right edge being cut off a little” problem occurs when the body element has a scroll bar. So you can work around it by applying “body {overflow: hidden}” temporally before taking a screenshot. (e.g. enter “$(‘body’).css(‘overflow’, ‘hidden’)” on the console of the Inspector)

        Until now, I’ve used “screenshot –selector ” command on the Developer Toolbar. (Shift + F2) But the feature still has the same problem and the W/A also works.

        October 1st, 2015 at 03:41

  3. Hervé

    The screenshot feature is nice! I told french readers on http://mozillazine-fr.org/avec-firefox-41-mozilla-soigne-les-developpeurs/ Cheers.

    September 30th, 2015 at 02:08

  4. jt

    It doesn’t work with iframes.

    September 30th, 2015 at 09:00

  5. Ivan

    Hi Potch,

    Do you know if there is a release scheduled to Adobe Primetime on Linux? It will be possible use it this year yet?

    I’m testing it on Windows (32 bits version) and it works like a charm ;)

    September 30th, 2015 at 16:20

  6. Vinay

    Doesn’t work.
    I tried taking screenshot of element on top of this very page and got a cropped image.
    Using 41.0.1 on Windows 7 64 bit

    October 1st, 2015 at 00:26

  7. Jacopo

    This is sweet :)

    October 1st, 2015 at 02:53

  8. Nutamatic

    If you screenshot this paragraph in this document “We should rename the Network Panel to Hagar, because it’s now HAR-able! …” then it is cut short on the right http://i.imgur.com/pD33DuT.png

    October 1st, 2015 at 04:50

  9. Francis Kim

    Great to see the Firefox dev tools getting better by the day.

    October 1st, 2015 at 05:10

  10. DD

    Some optimization would be great to improve CPU and memory usage. I stopped using FF because it was just too much for my machine (not that the alternatives are much better, aside from Opera though I much prefer FF features).

    October 1st, 2015 at 07:06

  11. Dumindu

    It’s better if we have a camera icon on toolbar and when clicks it, a drop down menu will be opened with options(like on show your bookmarks).
    Take full page screenshot
    Take visible part of the page
    Select area to take screenshot
    Select element to take screen shot

    October 3rd, 2015 at 00:39

  12. MikeP

    Is it possible to get the actual image in code? i.e. as a dataurl or img/canvas item?

    October 5th, 2015 at 12:40

  13. MT

    Cannot unsubscribe from comments for this post. Tried different options on the “Manage subscriptions” page (“Delete”, “Suspend”, “All comments”), none works. Please fix.

    October 5th, 2015 at 14:15

Comments are closed for this article.