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.
Screenshot tool
If you type screenshot it will filter the commands, there will be 4 types of screenshots methods that you can use:
- Area screenshot
- Full size screenshot
- Node screenshot
- 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.
Area screenshot
The area screenshot will let you select a part of the website and make an screenshot.
Result:
Full size screenshot
The full size screenshot will take a screenshot of the entire webpage, from start to bottom.
Result:
Node screenshot
The node screenshot will take let you make a screenshot of a selected node in the inspect element.
Result:
Capture screenshot
The capture screenshot will take a screenshot of the current page without scrolling and the size of the browser.
Result:
