Can I DevTools?

Share this post

Tips & Tricks #37

canidevtools.substack.com

Discover more from Can I DevTools?

Get weekly tips & tricks for your favorite browser devtools, created by @pankajparashar.
Continue reading
Sign in

Tips & Tricks #37

Can I take screenshot of a DOM node?

Pankaj Parashar
Feb 5, 2023
1
Share this post

Tips & Tricks #37

canidevtools.substack.com
Share

Chrome, Edge, Opera

  1. In the Elements panel, right click on the node and select "Capture node screenshot".

  2. It retains visible background colour of elements with no background colour applied.

canidev.tools/capture-node-screenshot/edge

Firefox

  1. In the Inspector panel, right click on the node, and select "Screenshot Node".

  2. Firefox does not retain background transparency of the element in the screenshot.

canidev.tools/capture-node-screenshot/firefox

Safari

  1. In the Elements panel, right click on the node in the DOM tree and click on "Capture Screenshot".

  2. Safari preserves the transparency for the elements with no applied background colour.

canidev.tools/capture-node-screenshot/safari
1
Share this post

Tips & Tricks #37

canidevtools.substack.com
Share
Previous
Next
Comments
Top
New

No posts

Ready for more?

© 2023 Pankaj Parashar
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing