Essential Tool: Firefox’s screenshot Command

Published 9 years, 3 weeks past

.

Everyone has their own idiosyncratic collection of tools they can’t work without, and I’ve recently been using one of mine as I produce figures for CSS: The Definitve Guide, Fourth Edition (CSS:TDG4e).  It’s Firefox’s command-line screenshot utility.

To get access to screenshot, you first have to hit ⇧F2 for the Developer Toolbar, not ⌥⌘K for the Web Console.  (I know, two command lines — who thought that was a good idea?  Moving on.)  Once you’re in the Developer Toolbar, you can type s and then hit Tab to autocomplete screenshot.  Then type a filename for your screenshot, if you want to define it, either with or without the file extension; otherwise you’ll get whatever naming convention your computer uses for screen captures.  For example, mine does something like Screen Shot 2015-10-22 at 10.05.51.png by default.  If you hit [return] (or equivalent) at this point, it’ll save the screenshot to your Downloads folder (or equivalent).  Done!

Except, don’t do that yet, because what really makes screenshot great is its options; in my case, they’re what elevate screenshot from useful to essential, and what set it apart from any screen-capture addon I’ve ever seen.

The option I use a lot, particularly when grabbing images of web sites for my talks, is --fullpage.  That option captures absolutely everything on the page, even the parts you can’t see in the browser window.  See, by default, when you use screenshot, it only shows you the portion of the page visible in the browser window.  In many cases, that’s all you want or need, but for the times you want it all, --fullpage is there for you.  Any time you see me do a long scroll of a web page in a talk, like I did right at the ten-minute mark of my talk at Fluent 2015, it was thanks to --fullpage.

If you want the browser --chrome to show around your screenshot, though, you can’t capture the --fullpage.  Firefox will just ignore the -fullpage option if you invoke --chrome, and give you the visible portion of the page surrounded by your browser chrome, including all your addon icons and unread tabs.  Which makes some sense, I admit, but part of me wishes someone had gone to the effort of adding code to redraw the chrome all the way around a --fullpage capture if you asked for it.

Now, for the purposes of CSS:TDG4e’s figures, there are two screenshot options that I cannot live without.

A screen capture of Facebook’s “Trending” panel.
I captured this using screenshot fb-trend --selector '#u_0_l'.  That saved exactly what you see to fb-trend.png.

The first is --selector, which lets you supply a CSS selector to an element — at which point, Firefox will capture just that element and its descendants.  The only, and quite understandable, limitation is that the selector you supply must match a single element.  For me, that’s usually just --selector 'body', since every figure I create is a single page, and there’s nothing in the body except what I want to include in the figure.  So instead of trying to drag-select a region of the screen with ⇧⌘4, or (worse) trying to precisely size the browser window to show just the body element and not one pixel more, I can enter something like screenshot fig047 --selector 'body' and get precisely what I need.

That might seem like a lot to type every time, but the thing is, I don’t have to: not only does the Web Toolbar have full tab-autocomplete, the Toolbar also offers up-arrow history.  So once I’ve tab-completed the command to capture my first figure, I just use the up arrow to bring the command back and change the file name.  Quick, simple, efficient.

The second essential option for me is --dpr, which defines a device pixel ratio.  Let’s say I want to capture something at four times the usual resolution.  --dpr 4 makes it happen.  Since all my figures are meant to go to print as well as ebooks, I can capture at print-worthy resolutions without having to use ⌘+ to blow up the content, or fiddle with using CSS to make everything bigger.  Also if I want to go the other way and capture a deliberately pixellated version of a page, I can use something like --dpr 0.33.

I have used this occasionally to size down an image online: I “View Image” to get it in its own window, then use screenshot with a fractional DPR value to shrink it.  Yes, this is a rare use case, even for me, but hey — the option exists!  I haven’t used the DPR option for my talks, but given the growing use of HD 16:9 projectors — something we’ve been using at An Event Apart for a while now, actually — I’m starting to lean toward using --dpr 2 to get sharper images.

A closeup of text on a test page.
A snippet of an image I captured using --dpr 5.  On-screen, the page was at 100% zoom, 16-pixel (browser default) text sizing.  The resulting capture was 4000×2403 pixels.

And that’s not all!  You can set a --delay in seconds, to make sure a popup menu or other bit of interaction is visible before the capture happens.  If you want to take your captured image straight into another program before saving it, there’s --clipboard.  And there’s an option to upload straight to --imgur, though I confess I haven’t figured out how that one works.  I suspect you have to be logged into imgur first.  If anyone knows, please leave a comment so the rest of us know how to use it!

The one thing that irks me a little bit about screenshot is that the file name must come before the options.  When I’m producing a bunch of figures in a row, having to drag-select just the file name for replacement is a touch tedious; I wish I could put the file name at the end of the command, so I could quickly drag-select it with a rightward wrist-flick.  But all things considered, this is a pretty minor gripe. 

The other thing I wish screenshot could do is let me define a precise width or height in pixels — or, since I’m dreaming, a value using any valid CSS length unit — and scale the result to that measure.  This isn’t really useful for the CSS:TDG4e figures, but it could come in pretty handy for creating talk slides.  No, I have no idea how that would interact with the DPR option, but I’d certainly be willing to find out.

So that’s one of my “unusual but essential” tools.  What’s yours?

Comments (21)

  1. It’s funny, when I saw your tagline, I thought… I’ve got plenty of browser screenshot tools, but the selector and dpr selectors really set this functionality apart. As usual… thanks for sharing!

  2. Thanks for sharing all of this. For screenshots I simply use ⇧⌘4 on the Mac, but in many cases instead of dragging over a selection I press the space bar to activate the “select the window below the cursor” camera (then click/tap to “release the shutter”). Firefox is my favorite front-end development tool, especially for live-composing CSS. The selector auto-completer is indispensable.

  3. Addendum: It (presumably) only auto-saves the screenshot if you have Firefox set to auto-save. On my install I have it set to ask me every time so I get the usual Save As filepicker, with the filename I typed pre-filled.

  4. Eric, I know everyone has their favorite tools, I use Awesome Screenshot which is available for both Chrome and FireFox. It lets you annotate, your screenshots via a web GUI, as well as has several capture modes including full page, timed and area. It is well worth checking out in the add-on section of your browser.

  5. Interesting observation, Jason. I definitely don’t have Firefox globally set to auto-save, but I wonder if I did check the “Always save” checkbox for PNGs at some point. And how I could find out!

    I use Awesome Screenshot myself, Michael! It’s great for quickly annotating screengrabs, as you say. If it also had “capture just this element” and the DPR options, I’d probably use it more often.

  6. You can use “resize to 1024 768” to activate the responsive design tool before doing your screenshot and you will get a resized screenshot

  7. With the --imgur option, you shouldn’t need to do anything else. For example, screenshot --imgur should capture the whole page and upload it.

    It may pause for a few seconds, but then a tooltip should appear above the command with a preview and link on imgur. If you click the preview, it will open the imgur link in a new tab. Let me know if it fails, I have worked on a few bits of this in the past, so I should be able to fix it up if needed.

  8. Finally, an end to capture, crop, and crop again with Gimp. With tools to identify the class or id of the target (often unknown in my work because machine-generated html), this is an awesome mix.

    Thank you.

  9. Wow! I had no idea about this!

    I’ve been using the excellent Paparazi: https://derailer.org/paparazzi/ That has a lot of sizing / cropping facilities. You can also drag and drop into sketch app, and it’s a bit like a HTML > Sketch / SVG app. Very handy.

  10. This is a great set of tips.

    I am a bit at a loss, though. I just installed Firefox 41 on OS X El Capitan and the toolbar is telling me that --dpr is not an available option.

    Is anyone having success with FF41/OS X 10.11?

    If so, could you share the full command you entered?

  11. I am a bit at a loss, though. I just installed Firefox 41 on OS X El Capitan and the toolbar is telling me that --dpr is not an available option.

    This was added only in more recent versions. Developer Edition 43 has this feature, but the option is called --dpi by accident. In Nightly 44, it’s been renamed to --dpr.

  12. for more simple way of doing screenshots :
    – open firefox dev tools go to settings and check “Take a full-page screenshot” it will add an icon to the toolbar to make full page screenshot
    – open firefox dev tools, inspect and choose a node, right click, you will have an take a screeshot of the node option

  13. Eric: On Windows, hit Alt to bring up the menu bar, then Tools > Options. (I think Mac may still do Edit > Preferences, but it’s been a few years since Firefox murdered my MBP.) Choose “Applications” on the left side and scroll the list on the right side to “PNG Image”. That will tell you what you have Firefox set to do. In my case it’s “Always ask”.

  14. Pingback ::

    Weekly Roundup of Web Design and Development Resources: October 23, 2015

    […] Essential Tool: Firefox’s screenshot Command: This excellent walk-through of Firefox’s screenshot feature by Eric Meyer highlights two options you can’t live without: –selector which allows you to specify a CSS selector to an element and device pixel ratio. […]

  15. This is a cool trick, saves me from having to set up PhantomJS :P

  16. Pingback ::

    Web Development Reading List #109 - American Fido

    […] for many it might be new: the cool screenshot and element screenshot feature in Firefox. You can use the built-in command line to get even faster results10 and automate […]

  17. Pingback ::

    Sunday is Link Day! Still Breathing - online home of Chris Taylor - web developer, musician, geek

    […] Firefox also have a really useful screenshot command: http://meyerweb.com/eric/thoughts/2015/10/22/firefoxs-screenshot-command/ […]

  18. Thanks, Eric! The full-web-page screenshot function was very useful last week when I was documenting the before-and-after results of adding Cloudflare’s CDN to a client’s web site.

    Speaking of which, and speaking of WordPress compromises, have you considered adding a web application firewall (WAF) to your site? As the name suggests, a WAF is a firewall for your website. It tracks and/or blocks activities that are strongly correlated with security intrusions. WAFs have become so much easier and cheaper than they ever used to be, and two of the best common implementations allow you to augment your site with a WAF without leaving your current WP hosting provider.

    My preferred approach for smaller clients is to use Cloudflare. You host your domains’ DNS at Cloudflare, configure appropriately, and they serve your content from their extremely well-connected global CDN, along with whatever performance and security enhancements you’ve configured for that site. At $20/mo for your first site and $5/mo for each additional site, it’s quite a deal. I use Cloudflare to add HTTPS to web hosts (e.g. Squarespace) that don’t otherwise support HTTPS, to improve security (with WAF rules) of PHP sites, and to improve performance (and presumably search rankings) along the way.

    For bigger clients and/or more complex sites, AWS’s WAF (+Cloudfront CDN) is a solid option – especially if your other infrastructure is already on AWS. The pricing is more complex than Cloudflare’s, but it’s still well worth it.

  19. Pingback ::

    Web Development Reading List #109 – Smashing Magazine

    […] for many it might be new: the cool screenshot and element screenshot feature in Firefox. You can use the built-in command line to get even faster results9 and automate […]

  20. Thanks a lot for this post. This feature seems widley unknown and is great, especially because of the fullpage and dpr options!

    Btw, I may confirm, that passing the filename as last argument didn’t work in the past. I just tried it with Firefox Developer Edition v51. After an update to 52 it did. Now it also shows a fancy preview of the screen after hitting the command :)

    Regards from Vienna
    MattDiMu

  21. Update: With FireFox 67 (and likely a few previous versions), a screenshot tool is available off the drop-down menu that appears when you click the ellipsis (…) at the left end of the address textbox. Options include a full-page save, the visible window save, or a region of the screen.