Can I create high resolution screenshots in Firefo

Question

In Firefox I can create a fullpage screenshot when I go to the web developer toolbar (can be activated in the developer tool settings). Unfortunately, I can do this only with the default resolution. Is there a chance to get images of higher resolution anyhow? With Firefox or an add-on? Or is it possible in another browser?

Answer 1

In Firefox, I use these tricks :

• Shift-F7 (or go to "Tools" menu -> Web Developer -> style editor) and insert these lines to zoom the whole page (here, by 4 or 400% so for example 72dpi becomes 288dpi and we get closer to a printable picture) :

body {
  zoom: 4;  /* change zoom factor here... */
  -moz-transform: scale(4);  /* ...and here. */
  -moz-transform-origin: 0 0;
}

• then Shift+F2 (or "Tools" > Web Developer > developer toolbar), and, in the little prompt at the bottom :

screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboard

You can also play with the Tools > Web Developer > Responsive Design View (or Ctrl+Shift+M) which allows you to specify custom resolutions and have a nifty button to take the screenshot, but zoom still has to be done manually.

Beware when choosing the zoom factor : Firefox gets grumpy if you try to generate a PNG too big. In very high resolution, you will have to drop the --fullpage option, screenshot fragment by fragment and reassemble in your image editor.

Ref: got the first trick from How can I scale an entire web page with CSS? : it seems Firefox still has issues with the zoom CSS rule so the -moz-* rules still have to be added, at least until version 38. If this gets corrected in future versions, just specify zoom: NN;.

Answer 2

I've found a great answer at superuser using just the right parameter. In the developer console (open with SHIFT+F2) use:

screenshot filename.png --dpr 4

This will increase screenshot resolution by factor 4.

Answer 3

Combining the above answers and comments, you can get a decent resolution screenshot of an entire webpage by hitting shift + F2 in Firefox. Then, when the console pops up at the bottom of the screen, input:

screenshot --fullpage --dpr 4 filename.png

On Windows 10, it saves that filename.png to your C:\Users\yourusername\Downloads folder by default. To specify you need to double down on backslashes:

screenshot --fullpage --dpr 4 C:\\Users\\yourusername\\path\\to\\filename.png

Answer 4

Firefox 62 and following

In Firefox 62 and following, the GCLI was removed and the screenshot command was moved to the Web Console and prefixed with a colon.

To take a screen shot at 4 times the native screen resolution, open the web console (Tools -> Web Developer -> Web Console or CtrlShiftK, CmdOptionK on Mac) and type:

:screenshot --dpr 4

The file name is now optional and the console will tell you where the file was saved (typically in 'Downloads' with a system-specific naming scheme).

Additional parameters are available, see the Web Console documentation and Erik Meyer's blog post for more.

An additional note: large DPR values don't always work. There seems to be a limit around 120 megapixels. Larger screenshots will simply not complete and do nothing, silently. If the command does nothing for you, try lowering the dpr or resizing the window, until you get something out.