Need to capture a screenshot in Chrome but don’t want to pay for a tool like Snagit? Or does your screenshot capture tool create pixel distortions like the one I get when I grab a rolling screenshot using Snagit?
Chrome DevTools has an option to capture a node screenshot—and it’s free!
To access it, right-click on the page element you want to grab a screenshot of, then right-click on the element in the Elements tab, and select Capture node screenshot.
It doesn’t matter how long the element is, it will be captured without concern about distortion.
One thing to keep in mind though is, if your element has a drop shadow, it will not be included in the capture. In that case, I recommend capturing its parent node/element and then crop. So instead of capturing the button in my filter-section div that has a drop shadow, I’d capture its parent container.
Then I can crop if I want to.
