Is there any way to take hires, full page screenshots?

Hello

I’d like to take full screenshots of long pages (because they are full of iframes and other stuff and it’s impossible to save them as HTML) but I’d like to take them at a higher resolution, say 1.5 DPR or 150% page zoom (which should be equivalent in practice.)

I tried many things, including the Take a Screenshot function; the developer console :screenshot command; the layout.css.devPixelsPerPx preference; the regular page zoom… but nothing produces a usable hi-res screenshot of the full page.

These are the issues I found:

  • The developer console :screenshot tool has nice --dpr and --fullpage options, but unfortunately it is limited to 10,000 page pixels of height, which makes it unuseable for capturing long pages.
  • The “Take a Screenshot” function seems to work around the 10,000 limitation, because it can produce screenshots of the full page, but unfortunately it does not have a DPR option.
  • If I try to set layout.css.devPixelsPerPx to 1.5 in about:config, Firefox shows everything 1.5x larger, but Take a Screenshot ignores that option.
  • If I try to zoom the page at 150%, this time the screenshot contents are zoomed, but the crop area is not, therefore it comes out cropped.

At this point I’m out of ideas.

Can anybody suggest a way to get a full page, hi-res screenshot?

I tried to get creative, but it still failed.

First, I zoomed the page to 150% and resized the window to achieve the desired layout.

Then I enlarged the document, but not the content:

const body = document.body
const html = document.documentElement

// Fix body width to viewport width
body.style.width = innerWidth+'px'

// Set html width to 1.5x viewport width
html.style.width = innerWidth*1.5+'px'

// Add html padding of 0.5x document height
html.style.paddingBottom = html.offsetHeight/2+'px'

This would create the right amount of empty space to the right and bottom of the document, to counteract the “wrong” cropping done by Take a Screenshot.

But when I try to take the screenshot, it bombs:

------Error in promise: BackgroundError: Error: An unexpected error occurred
    callBackground moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/callBackground.js:14
    promise callback*callBackground moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/callBackground.js:10
    screenshotPage moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:50
    preview moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:85
    promise callback*exports.preview moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:84
    start moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:281
    setState moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:240
    onClickFullPage moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:209
    assertIsTrusted moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/assertIsTrusted.js:21
    catcher moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59
    ui moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:288
    catcher moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59
    ui moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:243
    display moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:234
    ui moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:454
    promise callback*display moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:454
    start moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:292
    setState moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:240
    activate moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:764
    catcher moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59
    uicontrol moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:896
    <anonymous> moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:899
catcher.js:78:15

callBackground/<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/callBackground.js:14:19
promise callback*callBackground@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/callBackground.js:10:56
screenshotPage@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:50:17
exports.preview/<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:85:21
promise callback*exports.preview@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:84:40
start@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:281:15
setState@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:240:24
onClickFullPage@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:209:15
assertIsTrusted/<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/assertIsTrusted.js:21:28
watchFunction/this.catcher@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59:21
EventListener.handleEvent*display/this.ui</<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:288:49
watchFunction/this.catcher@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59:21
EventListener.handleEvent*display/this.ui<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:243:24
display@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:234:14
display/this.ui<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:454:40
promise callback*display@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:454:10
start@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:292:30
setState@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:240:24
exports.activate@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:764:13
watchFunction/this.catcher@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59:21
this.uicontrol<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:896:42
@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:899:3
catcher.js:79:15

Unhandled error: 
Object { fromMakeError: true, name: "BackgroundError", message: "BackgroundError: Error: An unexpected error occurred", stack: "callBackground/<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/callBackground.js:14:19\npromise callback*callBackground@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/callBackground.js:10:56\nscreenshotPage@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:50:17\nexports.preview/<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:85:21\npromise callback*exports.preview@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/shooter.js:84:40\nstart@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:281:15\nsetState@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:240:24\nonClickFullPage@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:209:15\nassertIsTrusted/<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/assertIsTrusted.js:21:28\nwatchFunction/this.catcher@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59:21\nEventListener.handleEvent*display/this.ui</<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:288:49\nwatchFunction/this.catcher@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59:21\nEventListener.handleEvent*display/this.ui<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:243:24\ndisplay@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:234:14\ndisplay/this.ui<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:454:40\npromise callback*display@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/ui.js:454:10\nstart@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:292:30\nsetState@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:240:24\nexports.activate@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:764:13\nwatchFunction/this.catcher@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/catcher.js:59:21\nthis.uicontrol<@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:896:42\n@moz-extension://bc3310f5-a899-468f-a207-6b302dcba4bc/selector/uicontrol.js:899:3\n", errorCode: undefined, popupMessage: undefined }
 undefined