Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Take screenshots of your site in a device frame
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.
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.
- Click the … button (More options) and select Show device frame.
- Click the … button again and select Capture screenshot.
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:
