There’s been times that I needed to show a client or a teammate a full screenshot of the current state of the website or even a part of it, so I’ve been using Full Page Screen Capture and, for any other kind of screenshots, Windows’ Snippet tool or Snaggit. If I want to host it online like in this post Gyazo, which also has a GIF maker.

Recently I found that Devtools has a tool that does a full-page screenshot, no extension needed!

This is not new thought, it was included in the Devtools update in April 2017, but looks like I live under a rock and didn’t find out until now…

Devtools

As stated in the official Devtools page:

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

Running commands in Devtools

You already know how to open Devtools but in case you just forgot and for the sake of this post, open it using the key F12 or the shortcut Ctrl + Shift + I. Then you have to open the Run command in the menu inside Devtools or use Ctrl + Shift + P.

Image from Gyazo

Screenshot tool

Image from Gyazo

If you type screenshot it will filter the commands, there will be 4 types of screenshots methods that you can use:

  1. Area screenshot
  2. Full size screenshot
  3. Node screenshot
  4. Capture screenshot

Before checking all the screenshots methods, after devtools finishes processing the image, it will automatically download it with the name of the webpage.

Image from Gyazo

Image from Gyazo

Area screenshot

The area screenshot will let you select a part of the website and make an screenshot.

Image from Gyazo

Result:

Image from Gyazo

Full size screenshot

The full size screenshot will take a screenshot of the entire webpage, from start to bottom.

Image from Gyazo

Result:

Image from Gyazo

Node screenshot

The node screenshot will take let you make a screenshot of a selected node in the inspect element.

Image from Gyazo

Result:

Image from Gyazo

Capture screenshot

The capture screenshot will take a screenshot of the current page without scrolling and the size of the browser.

Image from Gyazo

Result:

Image from Gyazo