Chrome Screenshot Specific Element


Making a element screenshot inside Chrome developer tools!

15 May, 2020 · 1 min read

Did you know Chrome developer console comes with a whole hidden Command menu?

I didn’t know until a while ago, and it comes packed with fantastic features.

Today we are looking into making a screenshot of a specific element with it.

How to Screenshot a specific element

  • Inspect the element you wish to screenshot
  • Press Cmd + Shift + P | Ctrl + Shift + P to open the Command menu
  • Type Screenshot within the menu
  • Select the Capture node screenshot to capture the selected element.

I hope you are as excited about this hidden menu as I am.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Chrome 107: Keyboard shortcuts

7 Nov, 2022 · 2 min read

Chrome 107: Keyboard shortcuts

Chrome DevTools: Recorder

21 Jan, 2022 · 3 min read

Chrome DevTools: Recorder

Join 2099 devs and subscribe to my newsletter