Tips & Tricks #37

Can I take screenshot of a DOM node?

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