How to Use Mobile Emulation Mode in Chrome

Tweet

Website testing has become increasingly complex. The days of verifying 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 and high-density displays. If you’re cutting code on a regular PC with a mouse and keyboard it’s difficult to appreciate how your masterpiece will operate. Features such as mouse hover don’t necessarily work; your application could be inoperable. But how can you test the system and avoid the pain of switching between multiple devices?

Fortunately, a new Mobile Emulation mode has been added to Chrome 32. It can help identify early development problems without leaving the comfort of your PC.

First, you’ll need Chrome 32. If you’ve been living on the far side of the moon for the past six years, it’s available at google.com/chrome.

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). Click the Settings cog icon in the top-right and open the Overrides section to enable Show ‘Emulation’ view in console drawer:

Chrome, enable mobile Emulation

Close the settings and open the Console Drawer (not the same as the general “Console”) by clicking its icon (to the left of the Settings cog) or by pressing ESC. You should see an Emulation tab in the Console Drawer (if it’s not there, try restarting Chrome):

Chrome, mobile Emulation tab

The Device section provides several dozen presets for popular mobile devices including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy phones, etc. Choosing one will define appropriate defaults in the following panels.

Note: The instructions above to enable Emulation Mode are for Chrome 32, stable. If you’re using the latest Chrome Canary, this option will be found in “Settings” in the “General” tab under “Appearance”.

Screen

The Screen options allow you to set:

  • a custom device resolution
  • the pixel ratio, i.e. 2 for Apple Retina displays where the real resolution is twice the viewport resolution
  • the font-scaling factor

Emulation screen panel

User Agent

Under “User Agent”, the user agent string can be spoofed so client and server-side code can react accordingly:

Emulation user agent panel

Sniffing user agent strings to load different mobile websites is an old technique. It’s difficult to use, takes considerable effort and has been (mostly) superseded by Responsive Web Design techniques. If you have the time, inclination, patience and budget and to create separate sites for every device, you may as well build native apps!

Sensors

The Sensors options permit device hardware emulation including touch, geolocation, and the accelerometer:

Emulation sensors panel

Enabling touch emulation switches the mouse cursor to a chunkier finger-sized shadow:

Emulation touch

Multi-touch events such as pinching can be simulated by holding down Shift and dragging the mouse.

Touch mode fires appropriate JavaScript events such as touchstart, touchmove and touchend. Mobile browsers attempt to ensure compatibility by also firing mouse events such as mouseover but this will only occur when you tap an element. The emulator correctly ignores mouseover when hovering the touch cursor.

Returning to Browser Mode

To end device emulation, go back to the “Device” section and click the Reset button.

I Don’t Need Any Devices Now!

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

You should also be aware that the emulator isn’t perfect:

  • You may encounter a few quirky bugs
  • CSS states like :hover are still applied, and
  • It’s not real emulation; the page is rendered by Chrome regardless of whether the actual device supports all the features you’re using.

Let’s hope the Chrome team can address those issues in subsequent releases.

That said, for quick and dirty mobile testing, Chrome’s Emulation mode is far easier than switching to a real smartphone or tablet and you’ll have all the developer tools at your disposal. It could save hours of effort.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://dewargreen.com Dewar Green Limited

    Pertinent and to the point as ever – thanks!

    • Craig Buckler

      Thanks DG!

  • http://www.12snaps.com/ Paweł Grzybek

    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 https://code.google.com/p/chromium/issues/detail?id=181204

    • 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!

  • http://www.evilripper.net/ evilripper

    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…

  • http://reidwalley.com Reid Walley

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

  • http://www.applegreenwebsites.com Stephanie Boucher

    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.