DEV Community

Cover image for Chrome devtools capture full page
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

9

Chrome devtools capture full page

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

We could always take screenshots by using the Chrome Screenshot functions.

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

Chrome screenshot specific element

How to take a screenshot in Chrome

So with this new version, you can simply 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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (1)

Collapse
 
dailydevtips1 profile image
Chris Bongers

Cool! Yeah really great for a lot of purposes!

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay