Chrome Canary DevTools: Screen Capture with the Device Frame
Taking screenshots of a working development environment is an essential tool for web designers, content creators and developers. Until now, we've had to rely on a favorite freemium app, browser extension, or plug-in to make it happen. I've personally cycled through quite a few that just seem to stop working unexpectedly or end up creating glitch art from screen capture extensions.
Screen Capture in DevTools
Google just released a new way to take screenshots with DevTools using its (very) beta Canary browser. Not only can you easily do a screen capture from within DevTools, but Chrome Canary will now wrap a screen capture in the device frame.
Capture with the Device Frame
Follow these steps to capture with the device frame:
1. Right-click and select ‘Inspect’
2. Hit the ‘Toggle Device Mode’ icon
3. From the device mode window, select the three-dot menu
4. Select ‘Show device Frame’
5. Choose ‘Capture screenshot’
Initially, I would have thought functionality like this would be reserved for a select list of devices, but it appears Chrome Canary went the extra mile getting several device frames into DevTools. This means that whether you have an iPhone or a tablet, taking a somewhat lifelike photo of a site in a device frame is now super simple.
Just one small disclaimer: Canary is very much in beta—which is to say that it may breakdown, get a flat tire, or choke on some internet fumes here and there. But it's where the new cool toys are launched.
Screenshots can include the device frame, and get saved as a transparent .png. This is also convenient for generating images to use in mock-ups. Each file gets saved as a transparent .png with your content displayed within.
As mentioned, Chrome Canary is currently in beta--so, glitch art may still be a possibility with this handy in-browser tool. Potential glitches aside, this is a great method for stress-free screenshots.