Firefox’s :screenshot command
Published 5 years, 8 months pastBack 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).
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:
- --clipboard
- 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.
- --delay
- 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.
- --dpr
- 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.
- --fullpage
- 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.
- --selector
- Accepts a CSS selector and captures only that element and its descendants.
- --file
- 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.
- --filename
- 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.
Comments (13)
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?
Pingback ::
Firefox’s :screenshot command | Mr.Kapowski
[…] Chris McLeod Eric Meyer has a useful post about the Firefox :screenshot utility. […]
Pingback ::
These Weeks in Firefox: Issue 44 – Firefox Nightly News
[…] :yulia wrote about about the new :screenshot command for console (Bonus: Eric Meyers did too!) […]
Pingback ::
Firefox 62 – Tools Cool for School! – Mozilla Hacks – the Web developer blog
[…] 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 […]
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.
Pingback ::
The Developer Toolbar (or GCLI) is no longer in DevTools – Firefox Nightly News
[…] 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. […]
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.
@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).
Pingback ::
Firefox DevTools for CSS authors – LogRocket Blog
[…] 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. […]
Pingback ::
Interview with people from the web: Florens Verschelde
[…] a bitmap editor for simple tasks, Acorn makes me happy. I also do a lot of screenshots (on mac or from the Firefox console) to communicate with teams and customers. And I have a soft spot for online dictionaries […]
Pingback ::
Links: August 2018 – Joseph Scott
[…] Firefox :screenshot command – Simple way to take a screenshot of a page from the web dev console. Only in Firefox Nightly and Firefox Dev Edition right now. […]
Pingback ::
Actualité : Interview des gens du web : Florens Verschelde – Blog Jeremy Dondon
[…] tâches simples, Acorn fait mon bonheur. Je fais aussi beaucoup de captures d’écran (sur mac ou depuis la console de Firefox) pour communiquer avec équipes et clients. Et j’ai un petit faible pour les dictionnaires en […]
hi. I want to use both javascript and :screenshot too.
is it possible?
(for example I want the image filename to be the title of webpage or innerText of some element)
Thanks