Make screenshot of web page with device frame in Chrome

A lesser known feature of Google Chrome on Desktop operating systems is the ability to capture a screenshot of an opened page as if the screenshot taken was of the browser running on a mobile device. It can even add a frame around the screenshot so it looks like a realistic photo of a smartphone. Here is how it can be done.

There is a special tool in Chrome Developer Tools which allows you to emulate a mobile device. It is very useful for developers to check how their web sites look on smartphones and small screen devices. It allows to specify a custom screen size or use predefined device sizes like iPhone, iPad, Nexus or Samsung's Galaxy. Once the opened page is displayed in the device emulator, the user can capture a screenshot of the page. It is also possible to enable a device frame around the page so it will look like a realistic photo. winaero-com-blog-firefox-drops-all-npapi-plugins-except-flash-iphone-6

You can do it as follows.

  1. Open the desired page in Chrome and press F12. This will open Developer Tools: dev-tools-chrome
  2. Click the mobile device emulator button to switch the Developer Tools mode: mobile-view-mode
  3. Under the device selector, select some device. For example, I will select iPhone 6: device-selector
  4. Now, click the 3 dots menu on the right of the device selector and tick the option "Show device frame": enable-device-frame
  5. Voila, now your web page is displayed inside a nice device frame:
    Now, click the three dots menu again and select "Capture screenshot": capture-screenshot-menu-item

The result will be as follows: screenshot-is-captured

winaero-com-blog-firefox-drops-all-npapi-plugins-except-flash-iphone-6 You are done.

Leave a Reply

Your email address will not be published. Required fields are marked *