Save custom device width and height in chrome developer tools

Question

Chrome developer tools in chrome can simulate some device dimensions and even we can set custom width(x) and height(y) for viewport. my question is can we save this custom width or height with custom name or just save it.

Answer 1

In recent versions this is found in...

1. Developer Tools (CTRL+SHIFT/OPTION+CMD+I)
2. Settings (F1)
3. Devices
4. Add custom device…

As specified in the Device Mode & Mobile Emulation Chrome docs.

Chrome Canary now has this conveniently found under "Edit…" in the 'Responsive' drop-down menu when in 'device mode' (CTRL+SHIFT/OPTION+CMD+M when developer tools are open).

Answer 2

Yes, you can save custom presets. Just click the More overrides button in the top right (represented as three horizontal dots). The emulation drawer should show up in the Dev-tools. You can click Save As button and assign a name to the custom preset. The new preset should then show up in the list of Models.

Check out the official DevTools documentation on this for more detailed steps.

Edit: This seems to have changed in the newer versions of Chrome. matharden's answer includes the correct steps: inside the devtools, go to Settings, select Devices in the left navigation and select Add custom device...

Answer 3

If you bring up the developer tools, click the settings cog in the corner and then select Devices from the left-hand menu, there is an option at the bottom of that page to add a custom device.