DEV Community

volfcan
volfcan

Posted on

3 1 1

⚡️ 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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up