Screenshots ClipboardHow to screenshot one part of a web page
To screenshot one part of a web page in Chrome, right-click it and choose Inspect, then right-click its line in DevTools and pick Capture node screenshot. Chrome saves just that part, like a table, a card or a chart, as a PNG.
By Manish Kalyan, who makes Screenshots Clipboard. .
How do I capture exactly one element in Chrome?
DevTools can cut one element out at its exact edges. It takes three clicks.
- Right-click the part you want and choose Inspect.
- In the Elements panel, hover the highlighted line and the lines above it until the blue box on the page covers all of the part.
- Right-click that line and choose Capture node screenshot. The PNG lands in your downloads.
How do I drag a box instead?
In DevTools, press Ctrl+Shift+P (Cmd+Shift+P on a Mac), type screenshot, pick Capture area screenshot and drag over the part you want. Or use your computer’s keys: Win+Shift+S on Windows, Cmd+Shift+4 on a Mac.
How do I make the screenshot sharper?
In DevTools, open the device toolbar, choose Add device pixel ratio from its ⋮ menu and set DPR to 2, then capture. The picture has twice the pixels each way, which reads better on slides and in print.
Which way should I use?
Capture node screenshot for one clean element, like a pricing table. A dragged box when the part spans several elements, and your computer’s keys for anything outside the browser.
Where Screenshots Clipboard helps
Screenshots Clipboard is a Chrome extension that does this without DevTools: choose Area, then drag a box, or hover until the part you want lights up, like a card or a table, and click it. Press Alt+Shift+S to start. The shot lands in your stack, ready to mark up or paste with others. It’s free. Plus is $2.99 a month or $19 a year.
Questions
Is there a shortcut for an area screenshot in Chrome?
Chrome has no single key for it. Win+Shift+S on Windows and Cmd+Shift+4 on a Mac work in any app.
Why does my element screenshot cut off a shadow or a border?
Capture node screenshot cuts at the element’s own box. Pick the line above it in the Elements panel, its parent, to get a little space around it.
Over to you
What part of a page do you capture most: tables, charts or whole sections?
Write to us, and a person replies. Write to us