Allow custom device presets in integrated browser's "Emulate Device..." picker
- 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
Assessment
This issue has not been assessed yet.