Screenshot an HTML DOM Node using Chrome DevTools

Using Chrome DevTools, it’s possible to take a screenshot of a single HTML DOM element, instead of the entire screen or page. Here’s how to do it:

Step 1 β€” Inspect Element

Right-click the element you want to screenshot & select Inspect:

Step 2 β€” Capture Screenshot

Run a command in DevTools to capture the screenshot:

A screenshot of the selected node is downloaded in Chrome!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.