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:
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):
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”.
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
Under “User Agent”, the user agent string can be spoofed so client and server-side code can react accordingly:
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!
The Sensors options permit device hardware emulation including touch, geolocation, and the accelerometer:
Enabling touch emulation switches the mouse cursor to a chunkier finger-sized shadow:
Multi-touch events such as pinching can be simulated by holding down Shift and dragging the mouse.
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
:hoverare 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.