Types of Testing

Use DevTools Emulation

Learn how to use the Chrome DevTools emulation tool to test your site across many devices.

TL;DR

  • Start prototyping on the desktop; then tackle the mobile-specific parts on the devices you intend to support. The emulation tool makes this process more straightforward.
  • The emulation tool helps you test your site on a range of devices, testing not just the site's responsive, but how the site responds to user interactions and device location.
  • Devices often have unreliable connectivity; emulate network conditions.

Choose device to emulate

Once your site is running in a browser, open the Chrome DevTools emulation panel, select a mobile device, and emulate:

Chrome DevTools emulation tool

Emulate viewport

When you select a device and press the Emulator button, the tool zooms the page out to the physical default viewport of that device. In the case of the Nexus 4, the device-width is 768. See the mobile emulation docs for more information.

starter file in Mobile Emulator

Emulate touch events

Touch is an input method that’s difficult to test on the desktop, since most desktops don’t have touch input. Having to test on mobile can lengthen your development cycle, since every change you make needs to be pushed out to a server and then loaded on the device.

A solution to this problem is to simulate touch events on your development machine. For single-touches, the Chrome DevTools supports single touch event emulation to make it easier to debug mobile applications on the desktop.

To enable support for touch event emulation:

  1. Open the Emulation panel in the DevTools.
  2. Enable “Emulate touch screen” in the Sensors pane.

Mobile emulator Sensors pane

Multi-touch events can be simulated if you have a device with touch input, such as a modern Apple MacBook. For further assistance with multi-touch event simulation, see Multi-touch web development.

Emulate orientation

Many new mobile devices are now shipping with accelerometers, gyroscopes, compasses and other hardware designed to capture motion and orientation data.

Web browsers are providing increasingly more access to that new hardware, including such examples as the HTML5 DeviceOrientation events. These events provide developers with information about the orientation, motion, and acceleration of the device.

If your application is taking advantage of device orientation events, it can also be useful to override the values received by these events during debugging to avoid the need to test them on a physical mobile device.

The DevTools also support overriding device orientation. For more information, read Device Orientation Overrides.

Emulate network conditions

If you aren’t able to test on all real devices, you should emulate network conditions your users might experience.

If on a Mac, try out the Network Link Conditioner found in the Lion Developer Tools. This can be installed by going to Applications > Utilities > Network Link Conditioner and double-clicking the prefpane file.

Once you’ve launched it, you’ll see a drop-down listing a number of preconfigured network scenarios including 3G and EDGE:

Network Link Conditioner

On Windows, options also include Fiddler and Charles, an HTTP proxy which can throttle your connection speeds. These are the network characteristics you can simulate:

Settings for simulating network conditions

Emulate user agent

The native User Agent and dimension overriding lets you debug mobile browsers on different devices and operating systems.

  1. Within the Emulation panel, open up the Sensors pane.
  2. Check “Spoof user agent” and select “Android 2.3 - Nexus S”.
  3. Refresh the page.

An updated user-agent field is now sent as part of the request headers for page resources. Some websites may decide to serve optimized versions of the page depending on the user-agent. This is one case where spoofing a user-agent may be useful.

native user-agent overrides

Emulate geolocation

When working with HTML5 geolocation support in an application, it can be useful to debug the output received when using different values for longitude and latitude.

The DevTools support both overriding position values for navigator.geolocation and simulating geolocation not being available via the Sensors pane. See the Chrome DevTools geolocation overrides documentation.

Test multiple versions at the same time

The Web Starter Kit’s live reloading makes it possible to emulate your site on multiple devices and test at the same time:

  1. Navigate to your site’s URL.
  2. Open up the Emulation panel and select a device.
  3. Repeat this process for multiple devices.

Any changes you make to your site with automatically be pushed to each device emulation.

Updated on 2014-05-29

Authors

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 Site Policies.