Take a full page screenshot with Firefox on the command-line
I'm running Firefox on a Xvfb in a VPS. What I want to do is to take a full page screenshot of the page.
I can redirect Firefox to particular page using
firefox http://google.com
and take a screenshot (inside X) using ImageMagick
import root -window output.jpg
The problem is, most of the page need scrolling and I can't know the height beforehand.
The other way is to pick a very big height (like 4000px) and then process the image and remove the useless part. But that's unnecessary processing.
I found many Firefox add-ons, but I'm looking for a solution that can be programmed using the Shell Command line.
Edit: I ended up writing my own FireFox extension for doing this.
Solution 1:
The Developer Toolbar GCLI and Shift+F2 shortcut were removed in Firefox version 60. To take a screenshot in 60 or newer:
- press Ctrl+Shift+K to open the developer console (⌥ Option+⌘ Command+K on macOS)
- type
:screenshot
or:screenshot --fullpage
Find out more regarding screenshots and other features
For Firefox versions < 60:
Press Shift+F2 or go to Tools > Web Developer > Developer Toolbar to open a command line. Write:
screenshot
and press Enter in order to take a screenshot.
To fully answer the question, you can even save the whole page, not only the visible part of it:
screenshot --fullpage
And to copy the screenshot to clipboard, use --clipboard
option:
screenshot --clipboard --fullpage
Firefox 18 changes the way arguments are passed to commands, you have to add "--" before them.
Firefox 88.0 has a new method for taking screenshots. If extensions.screenshots.disabled
is set to false
in about:config, you can right-click the screen and select Take Screenshot. There's also a screenshot menu button you can add to your menu via customization.
You can find some documentation and the full list of commands here.
PS. The screenshots are saved into the downloads directory by default.
Solution 2:
Update 2018-07-23
As was just pointed out in the comments, this question was about getting a screenshot from the command line. Sorry, I just read over that. So here is the correct answer:
As of Firefox 57 you can create a screenshot in headless mode like this:
firefox -screenshot https://developer.mozilla.com
Read more in the documentation.
Update 2017-06-15
As of Firefox 55 there is Firefox Screenshots as a more flexible alternative. As of Firefox 57 Screenshots can capture a full page, too.
Original answer
Since Firefox 32 there is also a full page screenshot button in the developer tools (F12). If it is not enabled go to the developer tools settings (gear button) and choose "Take a fullpage screenshot" at the "Available Toolbox Buttons" section.
source: developer.mozilla.org
By default the screenshots are saved in the download directory. This works similar to screenshot --fullpage
in the toolbar.
Solution 3:
I ended up coding a custom solution (Firefox extension) that does this. I think by the time I developed it, the commandline mentioned in enreas wasn't there.
The Firefox extension is CmdShots. It's a good option if you need finer degree of control over the process of taking the screenshot (or you want to do some HTML/JS modifications and image processing).
You can use it and abuse it. I decided to keep it unlicensed, so you are free to play with it as you want.
Solution 4:
I think what you are looking for is a utility which enables you to save a complete page opened in your browser into a png file. Most probably you are looking for a utility like commandlineprint2.
After installing the extension, you just need to type the command:
firefox -print http://google.com -printfile ~/foo.png
Solution 5:
Firefox Screenshots is a new tool that ships with Firefox. It is not a developer tool, it is aimed at end-users of the browser.
To take a screenshot, right-click on an empty space on the page, and choose "Take Screenshot". If you then click "Save full page", it will save the full page, scrolling for you.
(source: mozilla.net)