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 DevTools: Recorder

21 Jan, 2022 ยท 3 min read

Chrome DevTools: Recorder

Chrome DevTools: CSS Overview

30 Nov, 2021 ยท 3 min read

Chrome DevTools: CSS Overview