Skip Main Navigation

Capture DOM element screenshots in Chrome

24 April 2020 · 2 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. 🤓


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 Principal Frontend Engineer at Stitch Fix, frontend development teacher, Google Developer Expert, and Microsoft MVP. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on Github


Attend upcoming minishops

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They’re highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day.