Firefox’s :screenshot command

Published 1 year, 1 month ago

Back in 2015, I wrote about Firefox’s screenshot utility, which used to be a command in the GCLI.  Well, the GCLI is gone now, but the coders at Mozilla have brought command-line screenshotting back with :screenshot, currently available in Firefox Nightly and Firefox Dev Edition.  It’s available in the Web Console (⌥⌘K or Tools → Web Developer → Console).

An image I captured by typing :screenshot --dpr 0.5 in the Web Console

Once you’re in the Web Console, you can type :sc and then hit Tab to autocomplete :screenshot. From there, everything is the same as I wrote in 2015, with the exception that the --imgur and --chrome options no longer exist.  There are plans to add uploading to Firefox Screenshots as a replacement for the old Imgur option, but as of this writing, that’s still in the future.

So the list of :screenshot options as of late August 2018 is:

Copies the image to your OS clipboard for pasting into other programs.  Prevents saving to a file unless you use the --file option to force file-writing.
The time in seconds to wait before taking the screenshot; handy if you want to pop open a menu or invoke a hover state for the screenshot.  You can use any number, not just integers.
The Device Pixel Ratio (DPR) of the captured image.  Values above 1 yield “zoomed-in” images; values below 1 create “zoomed-out“ results.  See the original article for more details.
Captures the entire page, not just the portion of the page visible in the browser’s viewport.  For unusually long (or wide) pages, this can cause problems like crashing, not capturing all of the page, or just failing to capture anything at all.
Accepts a CSS selector and captures only that element and its descendants.
When true, forces writing of the captured image to a file, even if --clipboard is also being used.  Setting this to false doesn’t seem to have any effect.
Allows you to set a filename rather than accept the default.  Explicitly saying --filename seems to be optional; I find that writing simply :screenshot test yields a file called test.png, without the need to write :screenshot --filename test. YFFMV.

I do have one warning: if you capture an image to a filename like test.png, and then you capture to that same filename, the new image will overwrite the old image.  This can bite you if you’re using the up-arrow history scroll to capture images in quick succession, and forget to change the filename for each new capture.  If you don’t supply a filename, then the file’s name uses the pattern of your OS screen capture naming; e.g., Screen Shot 2018-08-23 at 16.44.41.png on my machine.

I still use :screenshot to this day, and I’m very happy to see it restored to the browser—thank you, Mozillans!  You’re the best.

  1. so…
    how do we write a webpage that captures a remote browsers screen
    then how do we access/upload the screencap
    and finally…how does the user prevent a browser from supplying screen shots to said hypothetical malpage server?

  2. […] Chris McLeod Eric Meyer has a useful post about the Firefox :screenshot utility. […]

  3. […] :yulia wrote about about the new :screenshot command for console (Bonus: Eric Meyers did too!) […]

  4. […] as well, such as specifying output filenames, capture delays, and selector-cropped screenshots. Eric Meyer wrote a great primer on the power of :screenshot on his blog, and it will change your page capture […]

  5. Good stuff, thank you. Note that sc:->tab only seems to be working for me in the Developer Edition at the moment.

    Option I’d love to see is automatically naming the screenshot with a sanitized version of window.location like that other browser does.

  6. […] also want to thank Eric Meyer for his everlasting appreciation of the screenshot feature, and his continuous dedication to making sure the world knows about this feature over the years. […]

  7. Well I switched back to firefox after quite a while. I was not able to find the place to enter commands. I was not mozillian may be thats why I missed it. Anyway It is good to see it back. I think Google Chrome dont have the “save to clipboard ” functionality as of writing.

  8. @LG — As far as I know, there’s no way to (at least without the user installing an app or similar) get a screenshot of a user’s screen.

    A few months ago, I spent at least a few hours trying to see if something along those lines could be done to get around the 2010 privacy updates related to the :visited selector and found no solution (which is probably good).

  9. […] Eric Meyer also wrote a great post about the additional flags you can pass to the screenshot command in the console that I highly suggest reading. […]

Leave a Comment

Management reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

Comment Preview

If you're satisfied with what you've written, then go ahead...