DEV Community

volfcan
volfcan

Posted on

⚡️ trick: take a screenshot of a webpage with the dev console ™

taking screenshots of a webpage and its components is one of the key steps for proper product design and development.

here is the trick 👇

  1. open the developer console of the web page you want to take screenshot.

  2. choose the element and right click "Capture node screenshot"

you can whether take a screenshot of a full page or individual component/element with this mechanic

Image description

Top comments (1)

Collapse
 
moopet profile image
Ben Sinclair

I didn't realise you could do this. I usually use the command palette to pick one of the screenshot options, if I'm using Chrome:

the command palette menu in Chrome developer tools showing results for

In Firefox, "Screenshot node" does the same thing btw.