19

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?

Braiam
  • 1
  • 11
  • 47
  • 78
robsch
  • 9,358
  • 9
  • 63
  • 104
  • By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions … – CBroe Sep 23 '15 at 15:25
  • @CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot. – robsch Sep 23 '15 at 15:31
  • Sounds like something that probably should have been filed over on https://bugzilla.mozilla.org/ – Mike 'Pomax' Kamermans Oct 15 '18 at 17:10
  • @Mike'Pomax'Kamermans Turns out it was, and got fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1464461 – Calimo Oct 17 '18 at 14:21

4 Answers4

19

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.

Calimo
  • 7,510
  • 4
  • 39
  • 61
  • The "web console" seems to be separate from the developer console. If I went to the normal console, the `screenshot` command didn't work. It seems to only take js code. If I went to the webpage and pressed shift+f2 that worked though. Maybe I was doing something wrong. – Scribblemacher Apr 03 '19 at 17:01
  • 1
    @Scribblemacher what you describe is the behavior before Firefox 62. This answer applies only to Firefox 62 and later. You probably have version 60 ESR, hence this answer doesn't work and you should check the other ones. – Calimo Apr 03 '19 at 17:16
  • you're right, this is 60 ESR. Shift+F2 worked to get me to the web console though. The screenshot command still worked. – Scribblemacher Apr 04 '19 at 14:49
  • @Scribblemacher no, Shift+F2 brought you to the developer toolbar, aka GCLI. Before Firefox 62 this was separate from the web console. It was removed in Firefox 62 and doesn't exist any longer: only the web console exists now. – Calimo Apr 04 '19 at 15:21
  • Very helpful answer so thank you. I have confirmed that `--dpr 8` does have the unfortunate behavior of "Larger screenshots will simply not complete and do nothing, silently" on the pages I've tried it on. Only `--dpr 4` seemed to work consistently. – bgoodr Aug 04 '19 at 15:34
12

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;.

Chl
  • 401
  • 4
  • 8
8

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.

fineliner
  • 152
  • 2
  • 5
2

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

rer
  • 1,198
  • 2
  • 13
  • 24