«   Previous tip Next tip   »

Chrome DevTools: Capture full sized screenshots without a browser extension

22nd June 2017
Capture full sized screenshots without a browser extension

Using DevTools, you can take full page screenshots, or even a screeshot of a specific element.

How to use this feature

  1. Type in screenshot into the Command Menu (shortcut: Cmd + Shift + P)
  2. 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.

«   Previous tip Next tip   »

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