How to Capture a Full-Page Screenshot in Chrome or Edge

Google Chrome

Hit F12 or CTRL + SHIFT + J to open browser console.

Click the opened console, then hit CTRL + SHIFT + P, or...

Click the vertical three dots on top far right on the console, then click Run command.

Then type in capture or screenshot. Pick (click) the Capture full size screenshot.

You need to provide where to keep the screenshot. It will be an image with .png type (usually). And BAM!

A full grown screenshot is saved.

I mean full page screenshot.

---

Microsoft Edge

Almost similar to the above steps. But Edge has different shapes for the icons. Instead of vertical three dots, Edge has the horizontal three dots. Same location, top far right of the browser console.

The rest of the steps are similar.

And BAM!

---

ℹ️ Limitation

---

Content Served With Iframe

For website which implements iframe for Content Security Policy (CSP) Enforcement (or sandboxing), for instance, Blogger — the preview page, and many other sites — especially with login (user management), this full size screenshot feature won't capture the entire page.

The reason is that the "entire page" you see is actually embedded within an iframe, which is served as a separate document. The full page capture feature in Chrome or Edge only grabs the parent HTML document, from top to bottom, and does not include the content of embedded iframe.

Look at this feature as an act of taking a photograph of a house from the outside. The iframe is like the kitchen, the living room, and all.

But hey, on actual website, how can they show those "inner compartments" to "naked eyes" but not to "a camera"? Your analogy is flawed.

Yes 😎

How come a singular iframe can be those rooms?

Agreed.

WHAT?

Indeed.

---

Content Served With Scrollable Container

The other limitation is for a webpage which implements overflow-y: auto or overflow-y: scroll to specific containers inside the page, and the document.body of the HTML is set to have overflow-y: none (no scrollbar).

Screenshot or full-page capture tools, they often only capture the main viewport (document.body). If the content is set as above technique (placed inside a scrollable container), it won't be captured fully unless scrolled manually.