DEV Community

Panayiotis Georgiou
Panayiotis Georgiou

Posted on • Originally published at panayiotisgeorgiou.net on

2

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
aviscollins profile image
AvisCollins • Edited

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?

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs