Device Toolbar Shortcut (Ctrl+Shift+M / ⌘⇧M)
Toggle the mobile/responsive device toolbar: ⌘⇧M on Mac, Ctrl+Shift+M on Windows. DevTools must be open first.
| Action | Mac | Windows | |
|---|---|---|---|
| Toggle device toolbar | ⌘⇧M | Ctrl+Shift+M | |
| Open DevTools first | ⌘⌥I | F12 | |
| Inspect element | ⌘⇧C | Ctrl+Shift+C | |
| Open Console | ⌘⌥J | Ctrl+Shift+J | |
| Reload page | ⌘R | Ctrl+R |
Preview mobile layouts
With DevTools open, ⌘⇧M (Mac) or Ctrl+Shift+M (Windows) toggles the device toolbar — Chrome and Edge's responsive design mode. You get a resizable viewport, device presets (iPhone, Pixel, iPad) and a DPR/throttling bar to test how a page looks on a phone.
Open DevTools first
This shortcut only works once the developer tools have focus, so press ⌘⌥I / F12 first. Firefox has an equivalent Responsive Design Mode at ⌘⌥M / Ctrl+Shift+M.
FAQ
What is the device toolbar shortcut?
With DevTools open, press ⌘⇧M on the Mac or Ctrl+Shift+M on Windows to toggle Chrome/Edge's responsive device toolbar.
Why doesn't the shortcut work?
The device toolbar only toggles when DevTools is open and focused. Press ⌘⌥I / F12 first, then ⌘⇧M / Ctrl+Shift+M.
Does Firefox have a responsive mode?
Yes — Firefox's Responsive Design Mode opens with ⌘⌥M on Mac or Ctrl+Shift+M on Windows.