[HOW TO] Take full page screenshots without using any extension on Google Chrome

[HOW TO] Take full page screenshots without using any extension on Google Chrome

I found this helpful feature on Google Chrome when I was having a problem taking a full page screenshot on Tablet and Mobile view of a page where I made changes on. I use Nimbus screenshot chrome extension to take Desktop screenshots and it works great but when on Developer tools > Device Mode and viewing it using chosen device, the extension is not properly capturing the full size screenshot that I want so I searched Google’s extensions library and found them all to be lacking… only to find out later that I actually don’t need any extension to get the screenshot I want. It’s all in Google Chrome Developer tools already. I have been using Developer tools for so long and have not really browsed on other features so it came to me as a surprise. I was so happy to try it and it worked even though not consistently (some screenshots, some would have blank top part so I would refresh the page and re-capture it). I suggest checking the saved image to ensure all are in place, if something doesn’t look right, just re-capture it or refresh the page before capturing another screenshot.

Anyway, let me show you how to do it:

Open the Developer Tools.

You can do this by clicking the More icon (3 dots in the top right of the browser), then clicking More tools > Developer tools.

Or you can use the function key F12 or the shortcut Ctrl + Shift + I on Windows/Linux/Chrome OS or Alt + Command + I on a Mac.

open-google-chrome-developer-tools

From this, you can take a screenshot of the page in 2 ways:

1) Using the Command Menu

  1. Press Control+Shift+P on Windows/Linux/Chrome OS or Command+Shift+P on a Mac.
  2. Type “screenshot” in the Command Menu and you will see the “Capture full size screenshot” option in the menu.
  3. Select Capture full size screenshot then Chrome will automatically save a full page screenshot in PNG format to your default downloads folder.
screen-capture-using-command-menu-developer-tools

2) Using Device Mode

  1. Turn on Device Mode. You can also use the shortcut Control+Shift+M on Windows/Linux/Chrome OS or Command+Shift+M on a Mac.
toggle-device-toolbar
  1. Choose your device preferences (device type, dimensions and zoom level) in the Device Toolbar.
  1. Click on the More Options icon (3 dots in the Device Toolbar)
  2. Select Capture full size screenshot, then Chrome will automatically save a full page screenshot in PNG format to your default downloads folder.