DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Panayiotis Georgiou
Panayiotis Georgiou

Posted on • Originally published at panayiotisgeorgiou.net on

Make screenshot of website with device frame in Chrome

show-device-frame

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

  1. Show device frame

show-device-frame

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

The post Make screenshot of website with device frame in Chrome appeared first on Panayiotis Georgiou.

Top comments (2)

Collapse
 
aviscollins profile image
AvisCollins • Edited on

I appreciate the time you spent finding that information for me. furnished apartments london

Collapse
 
stefanoero profile image
Ero Stefano

Is there a way to add new device frames?

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.