Simulate Mobile Devices with Device Mode
Google Developers Logo

Progressive Web App Dev Summit

All sessions are available on YouTube, watch now!

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

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 (toggle device mode icon on) 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).

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).
Authors
Profile photo of 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.