How To Screenshot Entire Web Pages Without A Chrome Extension

How To Screenshot Entire Web Pages Without A Chrome Extension

Chrome: Capturing screenshots is easy, whether you’re on Windows (hit the Print Screen button your keyboard) or Mac (Shift-Command-5). And while you can isolate down to just your active window using various keyboard commands or on-screen options, which makes it easier to snapshot whatever you’re doing, that’s still not ideal if you’re trying to take a picture of a full website — more than whatever’s on your screen, that is.

There’s no shortage of browser extensions that promise to take full-page screenshots on your behalf, and a number of them are pretty great (assuming you don’t have any crazy rendering issues when using them).

However, you don’t really need an extension to take a screenshot of a web page. We’ve covered how to do this in Firefox, and now it’s Chrome’s turn.

First, a quick hat-tip to developer Max Böck, which is where I stumbled across this method. You’ll start by opening up Chrome’s Developer Tools via F12 on your keyboard (Windows) or Command+Option+i (Mac). You’ll then enter into Device mode by clicking the little icon that looks like a smartphone sitting in front of a tablet:

Image Screenshot: David Murphy

Here’s what that does to the page you’re viewing in your browser:


Image Screenshot: David Murphy


Image Screenshot: David Murphy

You’ll then want to make sure that the “Responsive” preset is selected—it was, by default, when I did this. Then, click on the triple-dot icon in the far right of the same toolbar (it’s just a little to the left of the Device mode button you previously clicked on). You’ll want to select the option to “Add device pixel ratio,” and then change that ratio (DPR) in the field that appears from two—its default—to three.

From there, all you have to do is press Control/Command+Shift+P and type in “Capture full size screenshot.” Select that option, and Chrome will automatically create a lovely .PNG of the page and drop it in your Downloads folder.

If you want to adjust how the screenshot looks, feel free to play with the dimensions by either entering your own height and width in pixels, or exploring the available presets by hovering your mouse over the grey bars underneath the device mode’s options.

Image Screenshot: David Murphy

I tend to use “laptop” mode for mine, which sets the screen width at a pleasing 1440px — making for great screenshots of the websites I’m trying to archive.


  • Or more simply, skip the toggle device steps and just …
    – hit F12
    – with the resulting DevTools window in focus, hit Control/Command+Shift+P and begin to type in “Capture full size screenshot” and select that option (it auto-completes for you)
    – the resulting screenshot will match your current browser window – whatever width it is set to

Comments are closed.

Log in to comment on this story!