Chrome DevTools: Capture full sized screenshots without a browser extension22nd June 2017
Using DevTools, you can take full page screenshots, or even a screeshot of a specific element.
How to use this feature
- Type in
screenshotinto the Command Menu (shortcut:
Cmd + Shift + P)
- Select one of three options:
- Capture full size screenshot
- Capture screenshot
- Capture node screenshot
The "Capture screenshot" option will download an image of your website based on what is in the visible viewport.
Capture node screenshot
This is a handy feature for taking a screenshot of an element is isolation, here's exactly how to use it.
You can also trigger device mode, and for example emulate an iPhone. The screenshot you capture matches the exact device dimensions of the iPhone.