Simulate Mobile Devices with Device Mode | Web Tools

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.

Initial start for device mode

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.

Remember

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).

Topics

Authors

Paul Bakaus

Open Web Developer Advocate at Google • Tools, Performance, Animation, UX

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.