Chrome DevTools: Add a new custom device as a preset

Introduction

Do you frequently emulate devices of a certain dimension? In the DevTools Device Mode, you can add new device presets.

How to use this feature

1. Select Show Devices from the DevTools Command Menu (Cmd + Shift + P).
2. Select Add custom device.
3. Enter the device information.
   • Device Name
   • Width / Height
   • Device Pixel Ratio
   • User agent string
   • Device Type
4. Select Add Device.

Now, when you toggle device emulation on, you can select your newly created device from the device toolbar.

Extra resource

In addition to emulate device dimensions, you can also emulate various device sensors.