«   Previous tip Next tip   »

Chrome DevTools: Capture the screenshot of a specific element

1st September 2017
Capture the screenshot of a specific element

Introduction

You can capture the screenshot of a specific element via DevTools.

How to take a screenshot from DevTools

  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.

Explanation of the screenshot types

Here are explanations of what the different screenshot types capture exactly:

Conclusion

Screenshot capturing is one of the most popular tips people have learnt about Chrome DevTools. One other very popular tip is extracting the CSS from an element.

«   Previous tip Next tip   »

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