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:
    device-frame-in-action
    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.

One thought on “Make screenshot of web page with device frame in Chrome

  1. Dinesh Ramakrishnan

    Hi,

    It’s really nice post to take the screenshot. But it took the screenshot of the visible screen only. Is there any way to capture entire webpage without any tools?

    Thanks.

    Like or Dislike: Thumb up 0 Thumb down 0

    Reply

Leave a Reply

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