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 2This 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:
--clipboard Copies the screenshot to the clipboard--delay 5 Waits the specified number seconds before taking the screenshot--dpr 2 Uses the specified device-to-pixel ratio for the screenshot--file Saves the screenshot to a file, even if the --clipboard argument is specified--filename screenshot.png Saves the screenshot under the specified filename--fullpage Takes 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 selectorUnfortunately, 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:
