microsoft / microsoft/vscode

Allow custom device presets in integrated browser's "Emulate Device..." picker

Open
#326,713 0 comments 1 reaction 2 assignees Claimed by @jruales View on GitHub
browser-integration feature-request
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

The integrated browser's `Emulate Device...` command (`workbench.action.browser.pickDevicePreset`) shows a fixed list of 4 hardcoded device presets (iPhone 15 Pro, iPhone SE, Pixel 8, iPad Mini), defined directly in source with no way to add custom entries.

**Feature request:** Allow users to add their own named device presets (e.g. "MacBook Pro 14-inch" at 1512×982) via a `settings.json` entry, similar to how Chrome DevTools' device toolbar supports "Add custom device". This would let developers quickly emulate laptop/desktop breakpoints, not just the built-in mobile/tablet presets.

**Suggested shape:**
```jsonc
"workbench.browser.customDevicePresets": [
{
"name": "MacBook Pro 14\"",
"width": 1512,
"height": 982,
"deviceScaleFactor": 2,
"mobile": false
}
]
```
These would appear alongside the built-in presets in the `Emulate Device...` quick pick.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.