Little known Chrome DevTool feature: Device preview and screen capture

I am not sure how long this feature has been available, but I’ve found it yesterday and wished I knew about it long time ago.

Using the Device Emulator you can actually see what your website would look like in a specific device frame and you can actually take screenshots for your device frame and even your whole website page. No need to install special Chrome extensions to do this this work for you.

Open Chrome DevTools -> click on the Device Toggler.

Device Toggler

Device frame and screenshot capture options

So you can click on Show device frame to show the device frame around your website.

Device frame view

Or you can click Capture screenshot or Capture full size screenshot to capture a partial or full size screenshot of your website.

This is ideal for client briefs, debugging mobile layouts or just sending screenshots around to your team. Just one thing to remember is that the device frame layout doesn’t keep the browser toolbar in mind. So what you see here on the screenshot, might not be the exact amount real estate you have available when landing on the page.

I really wish they could make these features easier to find, I guess I should just follow their blogs closer.

Hope this helped you.