Add console.screenshot

[dcrousso]

WebKit has added support for a way to log images of Nodes, as well as the contents of the viewport, through console.screenshot (when Web Inspector is open).

console.screenshot(); // will log an image of the viewport
console.screenshot(document); // will log an image of the entire document, including below-the-fold content
console.screenshot(document.images[0]); // will log an image of a specific element

There are also plans to expand support for other object types, like ImageData [1], ImageBitmap [1], and instances all the various <canvas> context types (e.g. CanvasRenderingContext2D) [2].

[Exposed=(Window,Worker,Worklet)]
namespace console {
    void screenshot(any... data);
};

If the first argument is not able to take a "screenshot" (or generate some image), console.screenshot will default to logging an image of the viewport.

All arguments are currently logged before the image is shown.

This could be further extended to provide the ability to generate images from arbitrary content, like a dataURL string [3] or a detached/fragment DOM tree.

[1]: <https://webkit.org/b/199304> Web Inspector: support console.screenshot with ImageData and ImageBitmap
[2]: <https://webkit.org/b/199305> Web Inspector: support console.screenshot with subclasses of CanvasRenderingContext
[3]: <https://webkit.org/b/199307> Web Inspector: support console.screenshot with dataURL strings

[domenic]

Speaking purely as a web developer, this seems awesome; I hope other engines watching this repo are interested :).

[nchevobbe]

Firefox console has a :screenshot command which looks similar to this, even if the output is clipboard/file instead of the console output.
This would be nice indeed to have a standard way to do this.

I'd say that it would still be important for the user to directly get the screenshot to clipboard/disk (and not have to perform manual operation from the console output to actually be able to use the image), but that brings question of what to do when the console is not opened yet.
I can see this causing 2 issues:

• keeping images in console cache might increase memory consumption (think about a console.screenshot in a loop for example)
• if we have options to save images to disk, I guess we don't want them to end up on end user's devices

I also wonder how would that work for Node, since many terminal can't display images (print the data URI ?)

---

You can see the supported :screenshot options in https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers (or read this nice article from Eric Meyer about it) https://meyerweb.com/eric/thoughts/2018/08/24/firefoxs-screenshot-command-2018/).
Some of the key options we heard people like to use:

• take a screenshot of the full page (instead of only the current viewport)
• set dpr to mimick retina screens (or just get a nice crisp screenshot)
• save screenshot to clipboard for immediate use (to paste to gfx software, or use in webapp like slack, …)

[dcrousso]

@nchevobbe right-clicking (context menu) on the image will show a "Save Image" option that allows the user to save the image to disk.

Right now, console.screenshot is a no-op when Web Inspector is not open. I was considering having it behave like console.log (just log the values without taking a screenshot) when Web Inspector is not open, but given that the expectation of console.screenshot is an image, I thought that that could be confusing.

Images are preserved for the Web Inspector session (just like all other console methods), so closing and reopening will clear them.

It is currently possible to get an image of the full page by using console.screenshot(document).

We have a "similar" way to access console.screenshot via the Console "Command Line" API by just omitting the console. part (e.g. screenshot(...)).

I do like the idea of being able to copy it to the clipboard though 😁

[CleoMenezesJr]

3 years later and I would still like to know if there is any management to take the screenshot and save at the same time. lol