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.
You can use device mode to:
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.
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).
Device mode's screen emulator helps you test the responsiveness of your site, without the hassle of switching between multiple devices.
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.
Each preset automatically configures device emulation in the following ways:
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.)
To get more granular control over the screen emulator, you can tune the resolution settings below the device preset dropdown.
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.
Some examples of DPR-sensitivity on the web are:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }window.devicePixelRatio property.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.
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.
Network throttling artificially limits the maximum download throughput (rate of data transfer). Latency manipulation enforces a minimum delay in connection (RTT).
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.
Media queries are color-coded as follows:
| Queries targeting a maximum width. | |
| Queries targeting widths within a range. | |
| Queries targeting a minimum width. |
Click a media query bar to adjust the emulator resolution and preview styles for the targeted screen sizes.
Right-click a bar to view where the media query is defined in CSS and jump to the definition in source code.
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.
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.
Select the CSS media checkbox, and choose a media type from the dropdown list.
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.
Note: If your app detects sensors onload using JavaScript (such as Modernizr), make sure that you reload the page after enabling sensor emulators.
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‑events command line flag. Touch emulation currently does not trigger these handlers by default.
Because mouse events can still fire on touch devices, the touch emulator does not disable mouse events entirely.
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.
Tip: Try out the DevTools debugger in combination with touch emulation using this fingerpaint touch screen demo.
Unlike desktops, mobile devices commonly use GPS hardware to detect location. In device mode, you can simulate geolocation coordinates to use with the Geolocation API.
Enable the geolocation emulator by selecting the Emulate geolocation coordinates checkbox in the sensors pane of the emulation drawer.
You can use this emulator to override position values for navigator.geolocation, as well as simulate cases when geolocation data is unavailable.
Tip: Try out the geolocation emulator using this maps demo.
If you need to test accelerometer data used with the Orientation API, you can simulate the data using the accelerometer emulator.
Enable the accelerometer emulator by selecting the Accelerometer checkbox in the sensors pane of the emulation drawer.
You can manipulate the following orientation parameters:
You can also click and drag the model accelerometer to the desired orientation.
Tip: Try out the accelerometer emulator using this device orientation demo.
Device Mode offers a wide array of devices for emulation. You can add a custom device if you find an edge-case or niche device that isn't covered. To add a custom device do the following:
Although Chrome's device mode offers many powerful emulation tools, it does have some limitations. Currently known issues are described below.
<select> elements, are not emulated as a modal list.Despite these limitations, the device mode emulators are robust enough for most tasks. When you need to test on a real device, you can use the remote debugging DevTools for additional insight.