Screenshot a web page from within chrome devtools

19 Feb, 2022 • 186 words • 1 min • updated 04 Sep, 2025

⚠️ This post is over one year old. It may no longer be up to date or relevant. Opinions may have changed.

Suppose you want to take a screenshot from a web page, maybe to add to a pull request of a project you’re working on.

(i) The straightforward way to do so is to use your OS tool:

Windows: Snipping tool or hit the PrintScreen key
Linux: scrot or something from your Desktop Environment (DE) such as xfce4-screenshooter. For a full-featured one, I’d recommend flameshot (first) or shutter (second). For Wayland people seem to like grim.
macOS: Hit Cmd + Shift + 4 or one of its variations.

Even Chromebooks have a way to do so these days.

However, maybe you didn’t know you can also use Google Chrome to take screenshots! Here’s how:

Go to the page you want to screenshot.
Open DevTools (Ctrl + Shift + J on Linux).
Hit Ctrl + Shift + P à la VSCode to pop up a command bar, type ‘screenshot’.
Choose one option. I like the ‘Capture area screenshot’ one which allows me to drag a square for the area I want to capture.
Hit Enter.

You will then be prompted where you want to save your screenshot. Profit!