Thoughts about React,Web Development,Performance

October 19, 2021

How to Take Screenshots of DOM Nodes using Google Chrome

Giovanni Benussi
@giovannibenussi

Here's a neat tip: if you want to take an screenshot of a DOM node, you can inspect the element by right clicking it and select "Inspect" as shown below:

Inspecting a DOM element

Inspecting an element from Tailwind's official website.

And then click "Capture node screenshot":

Select the capture node screenshot option

That's it! Your browser will download an screenshot of that DOM node to your Downloads folder.

File downloaded on Google Chrome