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

Comments

[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:

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