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!