By Craig Buckler

How to Simulate Mobile Devices with Device Mode in Chrome

By Craig Buckler

Website testing has become increasingly complex. The days of checking functionality in a couple of browsers are long gone. Your latest masterpiece must be rigorously evaluated on a range of mobile, tablet and desktop devices with differing OSs, screen resolutions and capabilities. In extreme cases, it could take as long as the original development.

The process is complicated further by touch-screens, hybrid devices, and high-density displays. If you’re coding on a regular PC with a mouse and keyboard it’s difficult to appreciate how your masterpiece will operate. Features such as mouse hover won’t necessarily work and your application could be inoperable. But how can you test your system during development and avoid the pain of running and switching between multiple devices?

Fortunately, all modern browsers offer mobile emulation tools and one of the best can be found in Chrome. It can help identify early problems without leaving the comfort of your PC and development environment.

Developer Tools

Start Chrome, navigate to the web page you want to test and open the Developer Tools (Menu > Tools > Developer Tools, Cmd+Opt+I on Mac or F12 / Ctrl+Shift+I on Windows and Linux).

You can now enable the browser emulator by clicking the Toggle device toolbar icon in the top-left:

enable mobile emulation

A device simulation will now appear:

mobile device emulator

The dimensions of the emulated screen can be changed when Responsive is selected as the device type.

Touch Enabled Emulation

Move your mouse over the device to see a circular ‘touch’ cursor. This will react to touch-based JavaScript events such as touchstart, touchmove and touchend. Mouse-specific events and CSS effects should not occur.

Hold down Shift then click and move your mouse to emulate pinch zooming.

The Mobile Emulator Device Toolbar

It’s worth spending a little time familiarizing yourself with the toolbar and menu above the mobile emulator:

mobile phone simulator device toolbar

The default controls are:

  • the device type (or simply Responsive)
  • the current resolution
  • the scale (the screen can be zoomed in or out to fit better in the emulator pane)
  • a portrait/landscape toggle button (presuming a device other than Responsive is selected)

The three-dot menu allows you to show or hide additional controls:

  • the device frame (if available, a graphic of the phone or tablet)
  • a pixel ruler
  • the device pixel ratio (such as 2.0 for emulated Retina screens)
  • the device type (a category such as “mobile” or “tablet”)
  • network throttling (a way to limit bandwidth and test performance on slower connections)
  • the last option allows you capture a screenshot which includes the device frame if shown.

mobile phone simulator device toolbar options

CSS Media Query Bars

The bar below the toolbar shows a range of typical phone, tablet and device sizes. This can be clicked when Responsive is chosen as the device to set that width.

Select Show media queries from the three-dot menu to view a graphical color-coded representation of all media queries set in the CSS.

mobile phone emulator media queries

  • BLUE – queries which target a maximum width
  • GREEN – queries which target widths within a range
  • ORANGE – queries which target a minimum width

Any bar can be clicked to set the emulator screen to that width.


Emulated Device Options

The drop-down menu on the left allows you to select a device. Several dozen presets are provided for popular smart phones and tablets including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy, etc.

Not all devices are presented at once – choose Edit… at the bottom of the device drop-down or select Settings from the Developer Tools menu (F1) and choose the Devices tab:

device simulation options

You can enable or disable devices or enter your own with by defining:

  • a name
  • a classification such as “Mobile” or “Tablet”
  • a browser user agent string
  • the device resolution
  • and pixel ratio (such as 2 for iPhone Retina screens where the pixel density is twice as high as the reported viewport resolution).

Note that all browsers identify themselves with a user agent string sent with all HTTP headers. This can be examined on the client or server-side and, during the dark days of web development, would be used to modify or provide a different user experience. In extreme cases, the viewer would be directed to a different site. The technique was always flawed but has become largely redundant owing to Responsive Web Design techniques and completely unsustainable given the number of devices available on the market.

Bandwidth Throttling Simulation

The throttling drop-down allows you to emulate slow network speeds typically experienced on mobile connections or dodgy hotel and airport wifi! You can use this to ensure your site or application loads quickly and remains responsive in all environments.

The throttling drop-down is available in the Network tab and Chrome’s device toolbar (when enabled). You can set your own bandwidth configuration by choosing Edit… at the bottom of the throttling drop-down or select Settings from the Developer Tools menu (F1) and choose the Throttling tab:

emulator bandwidth throttling

Click Add custom profile then enter:

  • the profile name
  • the download speed in kilobits per second
  • the upload speed in kilobits per second
  • the latency in milliseconds (the typical delay when making a network request)

Emulated Mobile Sensors

Smart phones and tablets often have sensors such as GPS, gyroscopes and accelerometers which are not present in desktop devices. These can be emulated in Chrome by choosing More tools then Sensors from the Developer Tools main three-dot menu:

mobile sensor simulation

A new pane appears which allows you to define:

  • the current latitude and longitude or select a major city from the drop-down. You can also select Location unavailable to emulate how your application reacts when the device cannot obtain a GPS signal.
  • the orientation. Several presets are available or you can move the device image by clicking and dragging.

Remote Real Device Debugging

Finally, Chrome allows you to connect a real Android device via USB for remote device debugging. Select More tools then Remote devices from the Developer Tools main three-dot menu. Ensure Discover USB devices is checked then attach your phone or tablet and follow the instructions.

Chrome allows you to set up port forwarding so you can navigate to a web address on your local server on the device. Chrome’s preview pane shows a synchronized view of the device screen and you can interact either using the device or Chrome itself.

The full range of developer tools can be used including the Application tab to test Progressive Web Apps in offline mode. Note that unlike a real application which requires HTTPS, Chrome permits PWAs to run from localhost over an HTTP connection.

Great! I Don’t Need Any Devices Now!

Chrome’s mobile browser emulator is useful and powerful, but it’s no substitute for interacting with your website or app on a real device to evaluate the full user experience.

You should also be aware that no device emulator is perfect. For example, Chrome shows a representation of the page on an iPhone or iPad but will not attempt to simulate the standards support or quirks of Safari.

That said, for quick and dirty mobile testing, Chrome’s device emulation is excellent. It’s far easier than switching between real smart phone and tablet devices and you’ll have all the developer tools at your disposal. It will save hours of effort.

  • Pertinent and to the point as ever – thanks!

    • Craig Buckler

      Thanks DG!

  • Thats the best feature what google announced since ages for us front end developers. Im really glad of this in my browser without different tools. biggest advantage is debugging our code in browser for our iPhones or different mobile devices…

  • patrick h. lauke

    a quick note on the touch event emulation: currently, it’s still wildly different from a real device. mouseenter/mouseleave are being incorrectly fired, and the order of touch and compatibility mouse events is wrong. see

    • Craig Buckler

      Ooo, thanks Patrick. Shame about that, but I’m glad to see you’re still on top of all these mouse and touch shenanigans!

  • For the different resolutions I used Web Developer on Firefox but this is much better! :) thanks for the tip! :)

  • Les

    Not a fan of Google Chrome however this article has convinced me to update and give it (and other extensions available) a go, as mobile responsive design is something I’ve been putting off, for far too long now. ****- stars, once more.

  • Brett Franklin

    You could always use the ViewPort Resizer extension in the Chrome store, too…

  • christiane

    Nice article ! Be aware : when you first clic on Emulate button, the http headers are still storing “Mozilla user agent” so only the page size is adjusted. If the site uses a different stylesheet based on user agent, you won’t see it as if you were on your iPhone. Just refresh the page and the user agent will be corrected. Then you’ll see your site as it should. Christiane (

  • fairmountfair

    I seem to be experiencing an issue where when I emulate a device and then “reset”, my app no longer fires click events. Haven’t sussed it out thoroughly but it seems to be an issue.

  • This is pretty damn cool. Always good to have another tool to emulate the shit-load of mobile devices on the planet.

  • Michael Naumann

    Depending upon the quality of the emulation, this could be really slick for testing with Selenium WebDriver / chromedriver (provided that there’s reasonably parity between the desktop and mobile implementations of Chrome). I REALLY could have used the hell out of this in late 2011…

  • Does this only work in Chrome for Windows? I have Chrome 33 for OSX Mavericks, and I don’t see the “overrides” settings section. Do I need to turn that on somehow?

  • Thanks Christiane, that’s what I was doing wrong! Actually I use an emulator with Firefox which gives a range of viewport widths at once – not quite the same as actual devices but still useful.

  • Phil Vignola

    Do you know of the switches one would have to use to enable this be default? I would like to launch Chrome with the emulator specific switches to run automation. When I launch Chrome I would want it to emulate say a Note 3 once it launches then run automation against that browser window.

Get the latest in Mobile, once a week, for free.