use-devtools-to-take-screenshots.md

Use DevTools to Take Screenshots

Chrome DevTools has built-in screenshot functionality. You can capture screenshots of multiple different views by:

1. Open DevTools with ⌘ + ⌥ + i or by inspecting a specific element.

2. Open the command menu with ⌘ + Shift + P.

3. Type "screenshot" in the command menu.

4. Capure the screenshot for your preferred view.

There are four view options for capturing screenshots:

• "Capture area screenshot" allows you to capture a given area using a height/width selection tool.

• "Capture full size screenshot" will capture the full, entire page.

• "Capture node screenshot" will capture a screenshot of the currently selected DOM node.

• "Capture screenshot" will capture the currently visible page area.