Firefox 63, how to save screenshot of full webpage

[darkoshi]

Firefox used to let you save a screenshot of the full web-page via the Developer Toolbar:
https://darkoshi.dreamwidth.org/629515.html

(By the way, if you accidentally tried that from the toolbar shown in the Web Console instead of the Developer Toolbar, it didn't work, and showed an error, "SyntaxError: missing ; before statement".)

The Developer Toolbar has been removed in version 63 of Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=gcli-removal
https://www.ghacks.net/2018/05/21/firefox-62-developer-toolbar-removal/

So now you can save a screenshot from the Web Console; but you need to include a colon (:) in front of the command:
:screenshot --clipboard --fullpage

See:
https://www.ghacks.net/2018/08/27/screenshots-from-the-firefox-developer-tools-console/

In the Web Console settings, you can also select the "Take a screenshot of the entire page" option under "Available Toolbox buttons", to get a Web Console toolbar button for taking a screenshot. Using that button, rather than saving the screenshot to the clipboard, automatically saves a PNG image in the Downloads folder.

Comments

[darkoshi]

> And under Web Developer settings, there's still a checkbox to select Screenshots as a tool.

Are you talking about the "Take a screenshot of the entire page" checkbox, or something else?

When I selected that "Take a screenshot..." option, it adds a camera icon to the top right side of the Web Console. Clicking that icon takes a screenshot and saves it to the Downloads folder.

But I just now noticed (in v63.0.1) that there's also a "Screenshot Behavior" section in the settings with 2 options, "Screenshot to clipboard" and "Play camera shutter sound".

> I selected it and clicked the hamburger icon again but there was nothing added to the dropdown menu to let me take screenshots,

I don't get anything added to the menu either; I have to open up the Web Console and either type the :screenshot command in the command line area, or click that camera icon.

> I can take screenshots by clicking the three dots on the far-right side of the address bar, then clicking the words Take a Screenshot on the dropdown menu found there.

Oh, I have that too. It looks like that one is better if you only want a screenshot of a portion of the page, where the other way I talked about is better if you want a screenshot of the entire page (especially when it doesn't fit in the window without scrolling, so other screenshot programs won't capture it all).

[marahmarie]

Oh, I have that too. It looks like that one is better if you only want a screenshot of a portion of the page, where the other way I talked about is better if you want a screenshot of the entire page

If you're using the same tool I am then you should see two options when you select Take a Screenshot from the dots dropdown menu: Save Full Page and Save Visible (the third is My Shots, which are actually saved on screenshots.firefox.com). Save Full Page does a true scrolling capture from top to bottom.

On Web Developer I'm accessing the menu where you can check the box next to Screenshots through the web console (Toggle Tools on the menu dropdown, but that can probably be whatever menu choice opens a console window, I guess) -->click the three dots in the far right-hand corner -->choose gear icon/Settings on the dropdown.

Screenshot of what I'm referring to using the Firefox Screenshot Beta tool: https://screenshots.firefox.com/ySLRvYWu8tD4a2u0/darkoshi.dreamwidth.org - ah crap, it didn't capture the console window for some reason, so never mind (I'll try again but maybe I'll need Windows Snip or something to actually get a capture).

Here you go

[marahmarie]

(Via Windows Snipping Tool; I guess Fx Screenshot Beta is not capturing overlayed windows grrrr):

https://marahmarie.dreamwidth.org/file/445255.png