Use Chrome DevTools' Device Mode to build mobile-first, fully responsive web sites. Learn how to use it to simulate a wide range of devices and their capabilities.
In a nutshell
- Emulate your site across different screen sizes and resolutions, including Retina displays.
- Responsively design by visualizing and inspecting CSS media queries.
- Evaluate your site’s performance using the network emulator, without affecting traffic to other tabs.
- Accurately simulate device input for touch events, geolocation, and device orientation
How to disable Device Mode
Device Mode is enabled by default. If you’re building a Desktop-only site, you may turn it off by pressing the Toggle device mode () icon. When Device Mode is disabled, the icon turns grey and the viewport controls are hidden.
You can also toggle device mode on and off using the keyboard shortcut: Ctrl+Shift+M (or Cmd+Shift+M on Mac). To use this shortcut your mouse needs to be focused on your DevTools window. If it’s focused on your viewport, you’ll trigger Chrome’s switch user shortcut.
- Device Mode does a whole lot to give you an experience as close as possible compared to the real deal, but keep in mind that you'll still need to test on real devices to get the full picture (we can't yet emulate the performance characteristics of a real device).