Device Mode & Mobile Emulation

As your mobile audience grows, responsive mobile-friendly web design becomes all the more important. Web content needs to look and feel great across a wide variety of devices and network conditions. But testing the quality of your mobile experiences takes longer and makes debugging more complex.

Device mode brings the insights of mobile testing to your browser tab through the power of mobile emulation.

Enhance your current debugging workflow by combining device mode with the existing DevTools.

Note: Some of this documentation might be ahead of the stable version of Chrome.
If you are unable to locate a feature, try using Chrome Canary, which contains the latest version of the DevTools.

Enabling device mode

Turn on device mode by pressing the Toggle device mode icon.
When device mode is enabled, the icon turns blue and the viewport transforms into a device emulator.

You can also toggle device mode on and off using the keyboard shortcut:
Ctrl+Shift+M (or Cmd+Shift+M on Mac).

The initial device mode view.

Using the screen emulator

Device mode's screen emulator helps you test the responsiveness of your site, without the hassle of switching between multiple devices.

Get started with device presets

To jump-start your debugging process, device mode has a variety of emulation presets. Quickly emulate a particular device by selecting a model from the preset dropdown.

Skip manual configuration by choosing from a list of popular device presets.

Each preset automatically configures device emulation in the following ways:

Specifies the UA string for requests.

Sets the device resolution and pixel ratio.

Enables touch emulation (if applicable).

Emulates mobile scrollbar overlays and meta viewport.

Autosizes (boosts) text for pages without a defined viewport.

Tips: Toggle the screen resolution emulator on and off using the Emulate screen resolution checkbox. Alternate between portrait and landscape views by clicking the Swap dimensions icon. Select the Fit checkbox to ensure that the emulated screen remains fully visible inside your browser viewport, shrinking to fit if necessary. (This setting is for convenience and does not emulate the device differently.)

Customize the screen settings

To get more granular control over the screen emulator, you can tune the resolution settings below the device preset dropdown.

Customize the screen emulator by adjusting the screen resolution and device pixel ratio.

To emulate a custom screen size, manually set the CSS pixel dimensions of the device in the width and height fields.

If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the Device pixel ratio field.
The device pixel ratio (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the iPhone 5, have higher pixel density than standard devices, which can affect the sharpness and size of visual content.

Note: If you have a native Retina display, you'll notice that low dpi assets look pixelated while higher-dpi assets are sharp. To simulate this effect on a standard display, set the DPR to 2 and scale the viewport by zooming. A 2x asset will continue to look sharp, while a 1x one will look pixelated.

Save custom presets

Save custom emulations as presets so that you can easily return to them later.

To save your current screen settings as a preset, open the DevTools emulation drawer by clicking the More overrides icon in the top right corner of the browser viewport.

Tip: You can also use the keyboard shortcut Esc to open the emulation drawer.

In the device pane of the emulation drawer, click Save as and give your preset a name.

The device pane.

Now you can quickly select your custom screen emulation from the device preset dropdown.

Tip: The emulation drawer contains the same controls as the main device mode interface, plus some extras (media type and sensor controls).

Emulating network connectivity

Optimizing your site's performance under varying network conditions is a key aspect of developing for a mobile audience.

Device mode's network conditioning allows you to test your site on a variety of network connections, including Edge, 3G, and even offline. Select a connection from the preset dropdown to apply network throttling and latency manipulation.

Inspecting media queries

Media queries are an essential part of responsive web design. Device mode makes media queries readily accessible and easy for you to inspect.

To view the media query inspector, click the Media queries icon in the upper left corner of the viewport. The DevTools detect media queries in your stylesheets and display them as colored bars in the top ruler.

The media query inspector.

Media queries are color-coded as follows:

Queries targeting a maximum width.

Queries targeting widths within a range.

Queries targeting a minimum width.

Preview screen styles

Click a media query bar to adjust the emulator resolution and preview styles for the targeted screen sizes.

View CSS

Right-click a bar to view where the media query is defined in CSS and jump to the definition in source code.

Use the media query inspector to preview styling and locate the source CSS.

Tip: As you work with the media query inspector, you might find that you don't always want to use the mobile emulator. To turn off mobile emulation without exiting device mode, click the Reset all overrides icon and refresh the page.

Preview styles for more media types

The media query inspector targets styles intended for screens. If you want to preview styles for other media types, such as print, you can do so in the media pane of the emulation drawer.

Open the DevTools emulation drawer by clicking the More overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

The media pane.

Select the CSS media checkbox, and choose a media type from the dropdown list.

Emulating device sensors

Because most desktops don't have touch screens, GPS chips, or accelerometers, these inputs can be difficult to test on your development machine. Device mode's sensor emulators reduce the overhead of testing by emulating common mobile device sensors.

To access the sensor controls, open the DevTools emulation drawer by clicking the More overrides icon in the top right corner of the browser viewport. Then, select Sensors in the emulation drawer.

The sensors pane.

Note: If your app detects sensors onload using JavaScript (such as Modernizr), make sure that you reload the page after enabling sensor emulators.

Trigger touch events

The touch screen emulator lets you accurately test touch events and sequences as if you were using a touch-enabled device.

Enable touch emulation by selecting the Emulate touch screen checkbox in the sensors pane of the emulation drawer.

When you interact with the emulated viewport, the cursor changes into a fingertip-sized circle and touch events (such as touchstart, touchmove, and touchend) fire as they would on a mobile device.

Note: To trigger elem.ontouch* handlers, you must run Chrome with the ‑‑touch‑eventscommand line flag. Touch emulation currently does not trigger these handlers by default.

Tip: Hold Shift while dragging the mouse to emulate a pinch gesture.

Because mouse events can still fire on touch devices, the touch emulator does not disable mouse events entirely.

Simulate multi-touch

You can simulate multi-touch events on devices that support multi-touch input, such as laptops with trackpads. For more information about setting up multi-touch simulation, see the "Developer Tools" section of the Multi-touch web development guide on HTML5 Rocks.