Skip Main Navigation
Ben IlegboduBen Ilegbodu

Capture DOM element screenshots in Chrome

How to create a screenshot of a DOM element in Chromium-based DevTools

Friday, April 24, 2020 Β· 1 min read

Whenever I submit a PR for a UI change, I like to include a screenshot or two in order to aid the my teammates in reviewing the code, especially when it's CSS changes. Ideally there would be a Deploy preview, but not everything is running on Netlify (yet).

Usually I only need a screenshot of the section of the page that actually changed. So I hit Cmd+Shift+4 (on my Mac) and select the a section containing the UI. Boom screenshot. Well for now on, thanks to a tweet from Tierney Cyren, I can be more precise in my screenshot. In Chrome, Edge or any Chromium-based environment, I can get a screenshot of just the element in the DOM:

If you can't watch the video, here are the steps:

  1. Inspect the DOM element to highlight it in the Elements panel of the DevTools
  2. Press Cmd/Ctrl+Shift+P to pull up the DevTools command palette (also something new I just learned about!)
  3. Choose "Capture node screenshot"
  4. Save the file

That's it!

But it gets even better because this process is even easier in Firefox. Once in the Element inspector, right-click on the element. There's a "Screenshot Node" option right there in the menu! πŸŽ‰

Now all of your PRs will get immediate 🚒 thanks to your beautiful screenshots. πŸ˜‚

Keep learning my friends. πŸ€“

Subscribe to the Newsletter

Get notified about new blog posts, minishops & other goodies

​
​

Hi, I'm Ben Ilegbodu. πŸ‘‹πŸΎ

I'm a Christian, husband, and father of 3, with 15+ years of professional experience developing user interfaces for the Web. I'm a Google Developer Expert Frontend Architect at Stitch Fix, and frontend development teacher. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on GitHub