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

[marahmarie]

I'm extremely confused: the toolbar has been removed but Web Developer tools are still there on Firefox Beta 64.0b8 when I click the hamburger icon and click on Web Developer in the dropdown menu.

And under Web Developer settings, there's still a checkbox to select Screenshots as a tool. I selected it and clicked the hamburger icon again but there was nothing added to the dropdown menu to let me take screenshots, which I managed to do anyway after clicking around some more and somehow being brought to the Firefox Screenshots beta: https://screenshots.firefox.com/

Perhaps as a result of having the Screenshot Beta running in Firefox (I have no idea how, but see at some point I must have joined Firefox Test Pilot - but screenshots are not a current or past experiment there) 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.

[darkoshi]

Only the thing that was called "Developer Toolbar" is gone. At the other Web Developer tools are still there, as far as I know. I only ever used the Developer Toolbar for taking full-page screenshots, not for anything else.
But typing help (in an old FF version) in it shows that all these commands were available:

GCLI is an experiment to create a highly usable command line for web developers.

Available Commands:
addon - Manipulate add-ons help addon
appcache - Application cache utilities help appcache
break - Manage breakpoints help break
calllog - Commands to manipulate function call logging help calllog
clear - Clear the output area help clear
console - Commands to control the console help console
context - Concentrate on a group of commands help context
cookie - Display and alter cookies help cookie
dbg - Manage debugger help dbg
edit - Tweak a page resource help edit
export - Export resources help export
eyedropper - Grab a color from the page help eyedropper
folder - Open folders help folder
help - Get help on the available commands help help
highlight - Highlight nodes help highlight
inject - Inject common libraries into the page help inject
inspect - Inspect a node help inspect
jsb - JavaScript beautifier help jsb
listen - Open a remote debug port help listen
mdn - Retrieve documentation from MDN help mdn
measure - Measure a portion of the page help measure
media - CSS media type emulation help media
pagemod - Make page changes help pagemod
paintflashing - Highlight painted area help paintflashing
pref - Commands to control settings help pref
qsa - Perform querySelectorAll on the current document and return number of matches help qsa
resize - Control Responsive Design Mode help resize
restart - Restart Firefox help restart
rulers - Toggle rulers for the page help rulers
screenshot - Save an image of the page help screenshot
security - Display supported security and privacy features help security
unhighlight - Unhighlight all nodes help unhighlight
unlisten - Close all remote debug ports help unlisten

[marahmarie]

I honest to whatever cannot believe they'd leave the command line tool (we used to have an add-on for that that was a collaboration between a non-Moz dev and Moz starting 10 years ago; it was so unpopular Mozilla eventually yanked it) and pull the toolbar. I don't think they always make the wisest decisions. Considering how much the user base is shrinking I really can't see why they don't do in-browser polling before they pull something, anything, at this point (if they'd done that starting a while ago they'd still have the status bar, for sure).

[marahmarie]

It doesn't make sense, either, because in the bug to yank the toolbar they gripe about GCLI being neglected/not kept up and in the next breath tada here's a command line tool based on GCLI folks, enjoy I just gah Mozilla *flails*...oh I see, that was in old version, not the new (I just looked high and low through the Beta and googled but yeah, that end of it seems gone now, too).

Shift + f2 still brings it up in Waterfox (don't know if that's what you're using when you say "old FF" version).

[darkoshi]

By old FF, I meant Firefox Portable 52.9esr which I still have for testing/comparison purposes like this.

I currently use Waterfox as my main browser, but yesterday I was using FF 63 (because I use it for certain things). That's how I found out that the Developer Toolbar was gone. Actually, after the screenshot command wasn't working for me in FF 63 (I was typing it in the Web Console but without : in front), I tried it in Waterfox, and couldn't get it to work there either (because I was using the Web Console by mistake, instead of the Dev Toolbar). Then when I finally figured out my mistake in Waterfox, I went back to FF 63, and was like "Where did the Dev Toolbar go?!"

[marahmarie]

Oh wow, OK, thanks for the clarification...and way to go, Mozilla *rolls eyes*

They could've hired a dev to upkeep GCLI/the toolbar. Just hired them part-time to maintain it if they were so concerned about bitrot/lack of maintenance on it/lack of updated code. I haven't used the internal command line for Fx since the add-on existed that I was talking about (it was kind of neat, I could just never remember to use it often enough before eventually it sort of morphed into something I didn't like so much, with too much GUI and not enough commands, before they killed it off altogether).

[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

Question...

[marahmarie]

In the Web Console settings, you can also select the "Take a screenshot of the entire page" option under "Available Toolbox buttons",

Exactly what I did/described/took a screencap of for you. I'm not getting the button, though (or If I am I don't know where it is or what it looks like). Where is it/what is it? (It's not in the icons found under Customize, not in my browser chrome, not in my status bar. The only screen capture utility I'm coming up with is the one I mentioned in the address bar, but that's a pain to access compared to just having a button somewhere to hit).

Re: Question...

[darkoshi]

> Where is it/what is it?

It's right there in your screenshot (https://marahmarie.dreamwidth.org/file/445255.png),
the 4th icon to the left of the 'X'. The one that's supposed to look like a camera.

> 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.

You're right. I was focusing on the "Drag or click on the page to select a region" overlay, and overlooked the "Save Full Page" and "Save Visible" options at the top.

Well, now hopefully I'll remember at least one of these ways to take the screenshot. It took me at least half an hour, probably more like an hour yesterday, to figure it out, which is why I wrote the post.

Re: Question...

[marahmarie]

Well, just remember it won't capture window overlays, which if you need to show them to somebody (or save them for your own use) does kind of suck. :(

And yes, I see the icon now, thanks! (And that stinks, because I don't want to have to open the console just to take a screenshot!).

[charcoalfeathers]

Whoa, super cool tip. Thank you!

[charcoalfeathers]

I told my partner about this, and she said "well, you know that there's an official screen shot UI in beta now, right?" Uhhh.... so I went to look, and sure enough. If you click on the "..." on the URL bar, there's now an official screen shot option. It does more than just the full page, too. Apparently they are also planning to add annotation support.

[darkoshi]

I had noticed the ... "Take a screenshot" option before, but had forgotten about it until Marahmarie mentioned it too in the comments.

I'm just glad there's an easy way to save a picture of the whole page, even when it scrolls, without needing to take multiple screenshots and splice them together. I used to have an add-on that saved a full page as a PDF file (and even let you omit sections that you didn't want included), but since Firefox Quantum, I haven't found a good replacement. The ones that are available now seem to use web services to create the PDF, which makes me concerned about the privacy of my data.
But the "full-page screenshot" is just as good to me, as a PDF.

The only, or main reason I even need this feature, is because my 401k website doesn't have an option for downloading or generating statements. The paper statements they send are few and far between. (I get the feeling they don't really want us to have a clear picture of how our accounts are doing, and they don't want us to know when they're losing money.) So I have to take screenshots, urggh.