After relaunching Dr. Link Check (our broken link checker service) last month, we needed some high-res, high-quality screenshots of the website for promotional purposes. Typically, when in need of a quick screenshot I use the nifty Firefox Screenshots feature by right-clicking on the page and choosing Take a screenshot. This time, however, I needed screenshots with a higher pixel density than my non-Retina display supports. After some googling, I found an easy way to take high-DPI screenshots via the Firefox Web Console.
:screenshot --dpr 2
This results in a screenshot of the currently visible area being saved to the Downloads folder (with an auto-generated filename in the form of "Screen Shot yyyy-mm-dd at hh.mm.ss.png"). The
--dpr 2 argument causes Firefox to use a device-pixel-ratio of 2, capturing the screen at two times the usual resolution.
If you want to take a screenshot of the full page, append
--fullpage to the command. Here's the full list of arguments you can use:
--clipboardCopies the screenshot to the clipboard
--delay 5Waits the specified number seconds before taking the screenshot
--dpr 2Uses the specified device-to-pixel ratio for the screenshot
--fileSaves the screenshot to a file, even if the
--clipboardargument is specified
--filename screenshot.pngSaves the screenshot under the specified filename
--fullpageTakes a screenshot of the full page, not just the currently visible area
--selector "#id"Takes a screenshot of the element that matches the specified CSS query selector
Unfortunately, there isn't (yet?) a command for taking a screenshot at a specified window or viewport size. A good workaround is to open the page in Responsive Design Mode in Firefox: