DevTools Tips

Take screenshots of your site in a device frame

Categories: Supported by:

Taking a photo of a mobile device or tablet is daunting as you have to deal with fingerprints, glare and focus issues. Using Device Emulation makes this a lot easier.

Screenshot of the website in an iPhone frame

To take a screenshot of a web page inside a device frame, use either Chrome or Edge (or any Chromium browser):

  • In DevTools, turn on Device Emulation by clicking the icon or pressing Ctrl + Shift + M (Cmd + Shift + M on Mac).
  • Select a device from the Device dropdown menu. Be aware that not all devices have graphical frames.
    The device dropdown menu open and showing all the options.
  • Click the button (More options) and select Show device frame.
    Turning on device frame in the more options menu of the Device emulation tool.
  • Click the button again and select Capture screenshot.
    Selecting the screenshot option from the More Options menu.

That's it, you now have a photo of your web page inside a device on transparent background.

You can see this in action in the following video: