Advertisement

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-6You are done.

Support us

Winaero greatly relies on your support. You can help the site keep bringing you interesting and useful content and software by using these options:

If you like this article, please share it using the buttons below. It won't take a lot from you, but it will help us grow. Thanks for your support!

Advertisment

Author: Sergey Tkachenko

Sergey Tkachenko is a software developer who started Winaero back in 2011. On this blog, Sergey is writing about everything connected to Microsoft, Windows and popular software. Follow him on Telegram, Twitter, and YouTube.

2 thoughts on “Make screenshot of web page with device frame in Chrome”

  1. 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.

Leave a Reply

Your email address will not be published.

css.php
Using Telegram? Subscribe to the blog channel!
Hello. Add your message here.