Eric Meyer: Firefox: Screenshot Command 34.35% TRANSPARENT

Eric Meyer: 34.35% TRANSPARENT 1. 154 6.88% 6.88% BACKGROUND 2. 122 5.45% 12.33% REPEAT 3. 94 4.20% 16.53% BUTTON 4. 87 3.88% 20.41% BUZZ 5. 79 3.53% 23.94%

1. Firefox’s :screenshot command

   Published 3 months, 1 week ago

   Back in 2015, I wrote about Firefox’s screenshot utility, which used to be a command in the CLING.  Well, the CLING is gone now, but the coders at Mozilla have brought command-line screens hotting 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 --dpt 0.5 in the Web Console

   Once you’re in the Web Console, you can type :tic and then hit Tab to autocomplete :screenshot. From there, everything is the same as I wrote in 2015, with the exception that the --immure and --chrome options no longer exist.  There are plans to add uploading to Firefox Screenshots as a replacement for the old Immure 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.

   --dpt

   The Device Pixel Ratio (DPT) 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.

   --fuselage

   Captures the entire page, not just the portion of the page visible in the browser’s viewpoint.  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.pong, without the need to write :screenshot --filename test. YMMV.

   I do have one warning: if you capture an image to a filename like test.pong, 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.pong on my machine.

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

   • Published Friday, August 24th, 2018

   • Categorized under Browsers, Hacks, Tools

   • Six responses so far