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 2101 devs and subscribe to my newsletter