Screenshots of scrolling windows using Fx Developer tools

[Argus]

Many of us take screenshots for different reasons, and as most know there are several tools that can be used; from simply using the Print Scrn key (or pressing Alt-Print Scrn to capture the window in focus) to put a copy of the screen in the clipboard, so that it can be saved in a file, to using built-in tolls such as the Snipping Tool. These techniques, however, can't capture several pages of a web page, so some people use software such as FastStone Capture, or similar, to capture scrolling windows (such third party software often comes with several other useful tools).

Firefox users may have noticed that there is new "feature" in Fx 55-56, called Firefox Screenshot (at the moment in beta version) which can save a screenshot to the download folder (or upload a copy to the cloud (Lord knows where)).

However, as far as I know:

• It doesn't work in Private Browsing windows (at the moment),
• And even if you can scroll down the page to capture the whole page it is really inconvenient,
• It saves (if you click Download, not cloud...) a copy with a name such as "Screenshot-2017-10-10 Taking screenshots", i.e. no time stamp.

Then there is also the Developer Tools in Firefox, which I think works a bit better than Firefox Screenshot.

• It works in all windows, normal and Private Browsing.
• It takes a complete screenshot of the page with one or two clicks.
• It saves the file with both date and time in the file name.
• It can also be set to save a copy of the page to the clipboard.

To enable:

1. Open Developer Tools, for example via pressing F12.
2. Open Settings; click on the cog-wheel icon.
3. In the section "Available Toolbox Buttons", select "Take a screenshot of the entire page".
4. Close Developer Tools by pressing F12.

To use:
Press F12 (or something else to bring up the Developer tools) and press the camera icon in the Developer tools, close the Developer tools via F12.

To also save a clipboard copy of the same screenshot:
Open Developer Tools Settings, as mentioned above, and select "Screenshot to clipboard".

I have not compared file size, but they are saved as PNG, and as we all know a capture of several pages can sometimes become quite big.

See for example this page:
https://developer.mozilla.org/en-US/doc ... creenshots" onclick="window.open(this.href);return false;

[HansV]

Thanks, it works well. The only downside is that the page is stored as a 24-bit .png file. I have set FastStone Capture to save as 256-color (8-bit) .png by default; this is sufficient for most screen captures (photos being the exception), and produces files a quarter of the size.

[Rudi]

TX for the share Argus.
That could come in as handy advice for our FF users.

[Roderunner]

This feature has been updated. Source here

[Argus]

Yes and no; Firefox Screenshots has been improved (I mentioned some of the limitations at the time above.); the main topic of the thread is the screenshot feature in Firefox Developer Tools, and I haven't seen any changes there, but yes, they've added some features to Firefox Screenshots.

Good that you mention the blog post.

In version 58 they improved Firefox Screenshots (introduced in ver. 55/56), now it works in Private Browsing mode as well, and a copy can be sent to the clipboard (instead of creating a file).

As far as I've seen Firefox Screenshots save as PNG or JPEG files (and as mentioned to the clipboard).

I've seen that it can miss some elements or part of the page when doing full page screenshots.

[Roderunner]

Hi Argus, if its used to create an image, and saved, it requires being renamed or it looks like this:-

RR.png