I use Google Chrome quite a bit and want to be able to capture full-length Web page screenshots, both on my Mac and PC. Can you help out? Ideally, I don’t want to have to install any special software, apps, or utilities to accomplish the task…
It’s pretty darn easy to capture screenshots that are what you see on your screen, whether you’re on a Mac, PC, or even a Chromebook. Heck, you can do it on an Android or iOS device too easily enough. But capturing what’s not on the screen, that’s a bit more tricky because you need to use a tool that can either access off-screen data or automatically scroll down and stitch together an image from a progressive set of captures. The good news, however, is that if you don’t mind popping into the Google Chrome debugging area (mostly used for Web site developers), then there’s a really slick built-in full-screen capture tool within Chrome.
Not only that, but since you also use a Windows PC, it turns out that Microsoft Edge (which is built on the same core rendering engine – Chromium – as Google Chrome) has a fantastic tool that not only lets you easily capture full Web pages, but annotate them before you save the image too. Darn handy for design or client work! Let’s check it out…
FULL WEBPAGE CAPTURES IN GOOGLE CHROME
To use this particular solution in Chrome, you’re going to have to be comfortable with command-key sequences. This means that you want to push down on a number of keys on your keyboard at the same time. Before we get to that, however, here’s a Web page – my own!
Now it’s time to open up the debugging system window, which will appear on the right side, pushing the page to be narrower as you’ll see. To accomplish that, you want to use the keystroke combination of Option + Command + I (that’s the letter “I” as in “i”nteractive debugger). The easiest way to produce a combination of this sort is to push Option, then hold it down while you push Command, then hold both down while you push “I“. Then let go of all three keys simultaneously.
Now there’s a new interactive debugging window that appears on the right side of your Web page:
In this instance, my site is responsive so it’s changed the layout a bit due to the narrowness of its new window. A good move at this point is to maximize the width of your browser window to avoid this problem. The debugging window can be pretty intimidating but don’t worry, you don’t have to do anything therein.
In fact, it’s another keystroke combination, but this time you want to press Command + Shift + P. Remember, push and hold Command, add Shift, then push “P” and let all three keys go simultaneously. This brings up a little search box within the interactive debugger:
It offers a lot of common choices, but you can ignore all of them. Type in “screenshot” and it’ll show you the four possible screenshots that can be done within the Google Chrome debugger:
Neat, eh? Now just click on “Capture full size screenshot” and it’ll do all the work necessary, dropping the resultant screen capture image into your Downloads folder in PNG format. This is confirmed by the download toolbar on the lower left:
Now you can safely close that interactive debugging window by clicking on the “X” on the top right corner, as highlighted:
The resultant image is likely going to be skinny and very, very long. Here’s what my page looks like (and I trimmed it down a bit before I included it in this article):
Pretty helpful! Now you can share that with others, grab whatever subset of the image you want, print it across a dozen pages and tape it to your wall, whatever you want!
FULL WEBPAGE CAPTURES IN MICROSOFT EDGE
You can do the same thing on your PC if you really want to stick with Chrome, but I encourage you to check out Microsoft Edge. They’ve done a fantastic job and it really is the best Web browser for the Windows environment. Better yet, it has a much easier fullscreen capture tool, as you can see directly from the “•••” menu:
The graphic might be a bit small, but on the menu is an option “Web capture” with the shortcut of Control+Shift+S. Choose that and a tiny window pops up at the top of the browser:
Choose “Full page” and it not only captures the full webpage but it shows you the result in a simple annotation graphics editor:
Want to save your new capture? Just click on the floppy disk icon – as highlighted. Yes, a floppy disk icon. Does Microsoft still live in the 1990’s with their computers? Does anyone in Redmond actually have a floppy disk reader on their PC? 🤓
Anyway, that’s how you can capture full, long and complete Web page images in Chrome or Edge. Hope that’s useful!
Pro Tip: I’ve been writing about the Mac since, well, the very beginning. Please check out my Chrome help, as well as my extensive Mac help library for hundreds of useful tutorials and how-to guides, then pop over to my Windows help library for hundreds more. Thanks!