Take high-resolution screenshots of web pages

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

Take high-resolution screenshots of web pages

Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at the bottom of this page for more tips on that). But sometimes, the resulting screenshots aren't high-resolution enough for your needs.

It turns you can make DevTools take high-resolution screenshots of your web pages too!

From the Console in Firefox

Firefox has a super handy :screenshot command you can use in the Console tool to take screenshots. It takes a few options, including --dpr to specify the device pixel ratio. The default value is 1, but you can set it to 2, 3, or any other number to take screenshots at higher resolutions.

For example: :screenshot --dpr 3 --fullpage will take a screenshot of the full page at three times the resolution.

Firefox, with DevTools opened, and the Console tool visible, showing that :screenshot command

Find out more about the :screenshot command and its other options in the Firefox DevTools documentation.

From Device Mode in Chromium-based browsers

Here's a nice trick to do a similar thing in Chromium-based browsers (Chrome, Edge, Brave, etc.):

  1. Open DevTools and go to the Device Mode tool.
  2. Click the Dimensions dropdown menu and select Responsive.
  3. Enter the desired width and height for your screenshot. For example 1500 and 5000.
  4. Click More options (the three dots icon) and then click Capture full size screenshot.

Chrome, with DevTools and device mode opened, showing that large width/height dimensions have been set. MS Paint next to it, with the resulting screenshot

See also