In the past I’ve always used a Chrome browser extension to create full page screenshots. Although it worked “okay”, it was never really what I was looking. It was a bit slow, you had to go through a editor and the download link of the actual file was a bit hidden away.
Taking a Full Page Screenshot With Chrome
In version 59 Chrome added this as a very welcome feature for me. It meant taking full page screenshots faster, and a browser extension less to use and load in. Follow these steps to take a full page screenshot;
1. Open the Developer Tools
I like to use the CMD + ALT + I shortcut (CTRL + ALT + I for Windows), but another way would be through the View > Developer > Developer Tools menu, or by right clicking on the page and select the ‘Inspect’ option.
2. Open the Command Field
When you’re focussed on the Developer Tools section, press CMD + SHIFT + P to open the command field (this can be done from any of the tabs in the Developer Tools).
When open search for the “Capture full size screenshot” option. Quickest way to do this is to type “full” as your search term.
3. Press Return… aaand You’re Done!
If you enter the correct search term it will automatically show only the “Capture full page screenshot” and you only have to press Return to download the full page screenshot to your downloads folder.
There you go, one beautifully long full page screenshot:
Do note that the downloaded file can be quite large, so if you’re planning on using it online (website, email) I’d recommend compressing it before doing so. For example TinyPNG is a quick and easy online service I like to use to just quickly drop and compress images.
Taking Full Page Screenshots From Mobile View
Chrome is very flexible, and with its Mobile view tools it will also allow you to take full page screenshots when using a mobile view. Just enable the “Device Toolbar” and select the device/window size you’d like to take the screenshot for. Follow the same steps as above to take the full page screenshot.