Using Firefox Console's :screenshot with Custom Pixel Ratios

This article provides a quick guide for web developers on how to capture high-resolution screenshots directly from the Firefox Web Console. By utilizing the built-in :screenshot helper command alongside the device pixel ratio parameter, developers can easily generate crisp, retina-quality images of viewports, full pages, or specific DOM elements without relying on third-party extensions.

Opening the Firefox Web Console

To access the :screenshot command, you first need to open the Web Console in Firefox. You can do this by navigating to the web page you want to capture and using one of the following keyboard shortcuts:

  • Windows / Linux: Press Ctrl + Shift + K
  • macOS: Press Cmd + Option + K

Alternatively, you can right-click anywhere on the page, select Inspect, and then click on the Console tab at the top of the Developer Tools panel.

Setting a Custom Device Pixel Ratio

By default, the :screenshot command captures the screen using the standard device pixel ratio (DPR) of your current monitor. To override this and capture a higher-resolution image, you must append the --dpr flag followed by your desired scaling number.

A DPR of 1 is standard resolution, 2 doubles the pixel density (similar to Retina displays), and 3 or 4 produces ultra-high-definition images suitable for print or heavy zooming.

To take a basic screenshot of the current viewport at double the pixel density, type the following into the console and press Enter:

:screenshot --dpr 2

Firefox will immediately capture the visible portion of the page and save the image to your default Downloads folder.

Combining Custom DPR with Other Parameters

The --dpr flag becomes even more powerful when combined with other :screenshot parameters. Here are the most common combinations developers use:

1. Full-Page High-Resolution Screenshots To capture the entire scrollable height and width of a webpage at a high resolution, combine --dpr with the --fullpage flag:

:screenshot --fullpage --dpr 3

2. Capturing a Specific Element If you only need a high-DPI image of a specific component, such as a chart or a navigation bar, use the --selector flag followed by a valid CSS selector:

:screenshot --selector "#main-header" --dpr 2

3. Copying Directly to the Clipboard To bypass downloading the file and instead copy the high-resolution image directly to your system clipboard, add the --clipboard flag:

:screenshot --clipboard --dpr 2

4. Delaying the Capture If you need to trigger a hover state or wait for an animation to finish before taking the high-res screenshot, use the --delay flag (measured in seconds):

:screenshot --delay 5 --dpr 2

Troubleshooting High-DPR Captures

When using high --dpr values (such as 4 or higher) alongside the --fullpage flag on very long websites, the browser may fail to save the image. This happens because the resulting image dimensions exceed Firefox's maximum canvas size limit. If your screenshot fails to generate, lower the --dpr value or capture the page in smaller sections using the --selector flag.