How to Take Screenshots of Entire Web Pages Without the Chrome Extension
Chrome: Taking screenshots is easy, whether you’re on Windows (press the Print Screen button on your keyboard) or Mac (Shift-Command-5). And while you can only isolate your active window using various keyboard commands or on-screen options, making it easier to take a snapshot of what you are doing, it is still not ideal if you are trying to take a photo of the entire website. – that is, more than what’s on your screen.
There is no shortage of browser extensions that promise to take full page screenshots on your behalf, and some of them are pretty good (assuming you don’t have any crazy rendering issues when using them). However, you don’t really need the extension to take screenshots of the webpage. We’ve looked at how to do this in Firefox , and now it’s Chrome’s turn.
First, a little tip to developer Max Boeck , this is where I stumbled upon this method. You’ll start by opening the Chrome Developer Tools with F12 on your keyboard (Windows) or Command + Option + i (Mac). You will then enter device mode by clicking on the small icon that looks like a smartphone sitting in front of a tablet:
This is what it does to the page you are viewing in your browser:
Before
After
Next, you’ll want to make sure the “Responsive” preset is selected – it was the default when I did this. Then click the three-dot icon in the far-right corner of the same toolbar (it’s just to the left of the device mode button you previously clicked on). You need to select the Add Device Pixel Ratio option and then change that DPR in the box that appears from two (default) to three.
From there, all you have to do is press Control / Command + Shift + P and type “Take screenshot at full size”. Choose this option and Chrome will automatically create a lovely .PNG file of the page and place it in your Downloads folder.
If you’d like to customize the appearance of your screenshot, feel free to play with the dimensions by entering your own height and width in pixels, or exploring the available presets by hovering over the gray bars below the device mode options.
I usually use laptop mode for myself, which sets the screen width to 1440 pixels, which makes for great screenshots of the websites I’m trying to archive.