A blog for technology, SEO tips, website development and open source programming.

Make screenshot of website with device frame in Chrome

0 3,226

All modern browsers offer mobile emulation tools, and one of the best can be found in Chrome. The post will show you how to Make screenshot of website with device frame in Chrome. It is very useful for developers to check how their web sites look on smartphones and small screen devices.

Here what you need to do:

1. Start Chrome, navigate to the web page you want to test and open the Developer Tools 
(Menu > Tools > Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux).

2. Click the mobile device emulator button to switch the Developer Tools mode

3. Show device frame

4. Select device to emulate

The drop-down menu on the left allows you to select a device. Several dozen presets are provided for popular smart phones and tablets, including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy, and so on.

Not all devices are presented at once. Click Edit… at the bottom of the device drop-down or click the DevTools Settings

Follow me on Instagram

😉  That’s it for now. 

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.

Leave a Reply

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More