/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(155) Performance Monitor CSS Grid Debugging (157)

Chrome DevTools: Capture the screenshot of a specific element

1st September 2017
Capture the screenshot of a specific element

You can capture the screenshot of a specific HTML Element/DOM Node via DevTools. To do this:

  1. Inspect the element you wish to capture.
  2. Open the Command Menu with Cmd + Shift + P / Ctrl + Shift + P.
  3. Type in screenshot within the Command Menu.
  4. You can now capture the screenshot of only the specific element, a viewport screenshot, or a full-page screenshot.

This is currently in Canary.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.