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. 

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.

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.