238

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.

Flimm
  • 136,138
  • 45
  • 251
  • 267
Omar Abid
  • 15,753
  • 28
  • 77
  • 108

6 Answers6

497

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.

enreas
  • 11,152
  • 3
  • 31
  • 32
  • 4
    If you want to just copy the screenshot to your clipboard directly use screenshot --clipboard --fullpage – mbokil Oct 27 '14 at 15:04
  • 2
    That command doesn't work in a javascript console, so is there a link to more information about this toolbar? What else can it do? – tremby Dec 24 '14 at 04:29
  • 5
    Just FYI you can also select DOM notes through the inspector and then `right-click` -> `screenshot node`. This is super helpful when you want to screenshot a section of a page. – Tom Jan 21 '16 at 22:43
  • 5
    Full page screenshot to clipboard - `screenshot --clipboard --fullpage` Screenshot of a particular node (by Id) - `screenshot --clipboard --selector #elementId` – Mohnish May 12 '16 at 20:25
  • 4
    I had to use `:screenshot --clipboard --fullpage` (mind the colon) – someonr Dec 21 '18 at 15:24
  • In WaterFox 56.2.6, all I needed to do was press `shift-F2` to open the CLI bar at the bottom of the screen, then I could type `screenshot --fullpage` and the image was saved to the "Download" folder. More features are available via this method. – gone Dec 29 '18 at 01:06
  • On MacOS, to open the developer console, I did COMMAND + OPTION + i – Trenton Aug 14 '19 at 17:50
  • 1
    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. – TylerH Apr 27 '21 at 15:38
  • 1
    Any cmd line option to open page or take full screenshot of page – user3754136 Oct 17 '22 at 20:30
143

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.

developer tools toolbar source: developer.mozilla.org

By default the screenshots are saved in the download directory. This works similar to screenshot --fullpage in the toolbar.

Mouagip
  • 5,139
  • 3
  • 37
  • 52
  • 7
    For those having Firebug opening on F12, the developer tools are available with Ctrl+Shift+K or Ctrl+Shift+I. Just... in case... someone never used them before. – Kir Kanos Nov 12 '14 at 14:47
  • Those keyboard shortcuts don't work on the Mac. Use Tools > Web Developer > Toggle Tools. And, yes, the screenshot button **is** disabled by default. Click the Settings icon to enable. – Snowcrash Mar 07 '15 at 08:45
  • on Mac, you can open the developer tools with `cmd`+`alt`+`i` – null Jun 10 '15 at 10:07
  • Firefox Screenshots uploads screenshots taken to Mozilla's servers. They did not make this obivous enough for me to notice in advance. Fortunately the image in my case wasn't too sensitive, though it was internal. Be warned. – Hammer Bro. Jun 26 '18 at 21:57
  • @HammerBro. You can click on "download" if you don't want the screenshot to be uploaded to Mozilla's servers. But I agree that the implications of the default behavior is probably not obvious to most users. – Mouagip Jun 28 '18 at 06:25
9

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.

Omar Abid
  • 15,753
  • 28
  • 77
  • 108
  • 20
    Hmm, that's not what "unlicensed" means: it actually means you don't give any permission for any use, which is clearly not true since in that very sentence you also say it's okay to use, abuse, and play with it as you want. Perhaps you want something like [the CC0](http://creativecommons.org/publicdomain/zero/1.0/legalcode)? – SamB Jul 05 '14 at 01:01
  • For those "unlicensed" things I prefer this: http://www.wtfpl.net/ It clearly states what is allowed without legal BS. – kap Mar 02 '17 at 14:15
  • 1
    @SamB I randomly stumbled on your comment. Yeah, I know 3 years later. The problem is that if I write a License, I already complicated things. The NOLICENSE approach is to simply stuff. – Omar Abid Sep 15 '17 at 20:34
  • 3
    Please folks, don't use custom license. I know people try to avoid legal nonsense by writing their own license, but they end up doing the opposite, causing legal head-aches for people as they try to figure out what the custom license actually means. See choosealicense.com – Flimm Jul 23 '18 at 09:23
  • @SamB - while "unlicensed" isn't explicitly an "official license", "The Unlicense" actually *is* a license, and seems to be pretty close to what the OP describes as his intent for the use of his code. See: https://choosealicense.com/licenses/unlicense/ – Will Ediger Dec 15 '19 at 05:15
8

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
SamB
  • 9,039
  • 5
  • 49
  • 56
Nehal J Wani
  • 16,071
  • 3
  • 64
  • 89
3

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)

Flimm
  • 136,138
  • 45
  • 251
  • 267
  • 4
    From the question: "I found many Firefox add-ons, but I'm looking for a solution that can be programmed using the Shell Command line." – Quentin Jul 23 '18 at 09:24
  • @Quentin this isn't an addon, it's directly integrated in last Firefox versions. – Veve Sep 21 '20 at 15:18
  • @Veve — emphasis on "using the Shell Command line" – Quentin Apr 26 '21 at 09:49
  • I have Firefox 88.0 and don't see the "Take Screenshot" option when right-clicking. I believe this is because, by default, the `extensions.screenshots.disabled` property in about:config is set to `true`. It needs to be set to `false` for that method to work. Otherwise, you need to add the screenshot option. (no restart is required when changing these properties) – TylerH Apr 27 '21 at 15:37
  • @TylerH You need to right-click on an empty space. I've edited my answer. – Flimm Apr 27 '21 at 15:44
  • @Flimm I did; I clicked all over on multiple different websites. The issue is that property in about:config. As soon as I set it to true, the option appeared in my contextual menu. – TylerH Apr 27 '21 at 15:59
1

You can use selenium and the webdriver for Firefox.

import selenium.webdriver
import selenium.common

options = selenium.webdriver.firefox.options.Options()
# options.headless = True
with selenium.webdriver.Firefox(options=options) as driver:
    driver.get('http://google.com')
    time.sleep(2)
    root=driver.find_element_by_tag_name('html')
    root.screenshot('whole page screenshot.png')
Gqqnbig
  • 5,845
  • 10
  • 45
  • 86