Chrome devtools capture full page


Capture the whole screen using chrome devtools

22 Mar, 2021 · 1 min read

Chrome finally launched an excellent way to capture a whole page in version 89.

We could always take screenshots using the Chrome Screenshot functions.

However, in version 89, the modified right-click element inspector allows us to capture a screenshot from the inspector.

How to take a screenshot in Chrome

So with this new version, you can open up the developer tools.

Mac Cmd + Shift + C or Windows: Ctrl + Shift + C.

Now open the element inspector, right-click any element and click the “Capture node screenshots” button.

Pro tip: If you use this on the body tag, you’ll get your whole website.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Chrome 107: Keyboard shortcuts

7 Nov, 2022 · 2 min read

Chrome 107: Keyboard shortcuts

Chrome DevTools: Recorder

21 Jan, 2022 · 3 min read

Chrome DevTools: Recorder

Join 2099 devs and subscribe to my newsletter