How to take screenshots with Chrome DevTools

Chrome DevTools can capture more than the part of a page currently visible on screen. It can save a full page, one element, or an area you select, which is often all I need for debugging or documentation.

Open DevTools and then open the Command Menu:

• On Windows, press Ctrl + Shift + I, followed by Ctrl + Shift + P.
• On macOS, press Command + Option + I, followed by Command + Shift + P.

Type screenshot to filter the available commands.

Pick what you want to capture

• Capture area screenshot
• Capture full size screenshot
• Capture node screenshot
• Capture screenshot

Capture full size screenshot is the useful one when the page is longer than the viewport. For a single component, select it in the Elements panel and use Capture node screenshot.

Chrome 89 also added a screenshot option to the element inspector’s context menu. If you already have the right node selected, that is the shorter route.