Kayce Basques

Sofia Emelianova

Use device mode to approximate how your page looks and performs on a mobile device.

Overview

Device mode is the name for a collection of features in Chrome DevTools that help yousimulate mobile devices. These features include:

• Simulating a mobile viewport
• Throttling the CPU
• Throttling the networkKey point: Alternatively, you canthrottle connection speed in theNetwork panel.
• Additionally, in theSensors panel:
  • Simulating geolocation
  • Setting orientation

Limitations

Think of device mode as afirst-order approximation of how your page looks and feels on amobile device. With device mode you don't actually run your code on a mobile device. You simulatethe mobile user experience from your laptop or desktop.

There are some aspects of mobile devices that DevTools will never be able to simulate. For example,the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs.When in doubt, your best bet is to actually run your page on a mobile device. UseRemoteDebugging to view, change, debug, and profile a page's code from your laptop or desktop while itactually runs on a mobile device.

Open the device toolbar

To open the device toolbar, follow these steps:

1. Open DevTools.
2. ClickdevicesToggle device toolbar located in the action bar at the top.

Simulate a mobile viewport

By default, the device toolbar opens in viewport withDimensions set toResponsive. Using theDimensions drop-down, you cansimulate the dimensions of a specific mobile device.

Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific valuesin the width and height boxes. In this example, the width is set to480 and the height is set to415.

Alternatively, use the width presets bar to set the width with a click to one of the following:

Show media queries

To show media query breakpoints above your viewport, clickMore options >Show media queries.

DevTools now displays two additional bars above the viewport:

• Theblue bar withmax-width breakpoints.
• Theorange bar withmin-width breakpoints.

Click between breakpoints to change the viewport's width so that the breakpoint gets triggered.

To find the corresponding@media declaration, right-click between breakpoints and selectReveal in source code. DevTools opens theSources panel at the corresponding line in theEditor.

Set device pixel ratio

Device pixel ratio (DPR) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels. In other words, DPR tells Chrome how many screen pixels to use to draw a CSS pixel. Chrome uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.

To set a DPR value:

1. ClickMore options >Add device pixel ratio.

   

2. In the action bar at the top of the viewport, select a DPR value from the newDPR drop-down menu.

   

Set the device type

Use theDevice Type list to simulate a mobile device or desktop device.

If you can't see the list on the action bar at the top, selectMore options >Add device type.

The next table describes the differences between the options.Rendering method refers towhether Chrome renders the page as a mobile or desktop viewport.Cursor icon refers to what typeof cursor you see when you hover over the page.Events fired refers to whether the page firestouch orclick events when you interact with the page.

Device-specific mode

To simulate the dimensions of a specific mobile device, select the device from theDimensions list.

For more information, seeAdd a custom mobile device.

Rotate the viewport to landscape orientation

Clickscreen_rotationRotate to rotate the viewport to landscape orientation.

Note that theRotate button disappears if yourDevice toolbar is narrow.

See alsoSet orientation.

Toggle dual-screen mode

Some devices, for example, Surface Duo, have two screens and two ways to use them: with one or both screens active.

To toggle between dual and single screen, click thedevices_foldToggle dual-screen mode in the toolbar.

Set device posture

Some devices, for example, Asus Zenbook Fold, have foldable screens. Such screens have a posture: continuous or folded. The continuous posture refers to a "flat" position and folded forms an angle between sections of the display.

To set the device posture, selectContinuous orFolded from the corresponding drop-down menu in the toolbar.

Show device frame

When simulating the dimensions of a specific mobile device like a Nest Hub, selectMore options >Show device frame to show the physical device frame around the viewport.

1. Click theDevice list and then selectEdit.

   

2. On theSettingssettings >Devices tab, either choose a device from the list of supported ones or clickAdd custom device to add your own.

3. If you're adding your own, enter a name, width, and height for the device, then clickAdd.

   

   Thedevice pixel ratio,user agent string, anddevice type fields are optional. The device type field is the list that is set toMobile by default.

4. Back in the viewport, select the newly added device from theDimensions list.

Show rulers

ClickMore options >Show rulers to see rulers. The sizing unit of the rulers is pixels.

DevTools shows rulers at the top and to the left of the viewport.

Click the rulers at specific marks to set the viewport's width and height.

Zoom the viewport

Use theZoom list to zoom in or out.

Capture a screenshot

To capture a screenshot of what you see in the viewport, clickMore options >Capture screenshot.

To capture a screenshot of the whole page including the content that isn't visible in the viewport, selectCapture a full size screenshot from the same menu.

To include a device frame when capturing a screenshot inDevice-specific mode, firstShow device frame, and then clickCapture screenshot as directed previously.

To learn other ways to take screenshots with DevTools, see4 ways to capture screenshots with DevTools.

Throttle the network and CPU

To throttle both the network and CPU, selectMid-tier mobile orLow-end mobile from theThrottle list.

Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower thannormal.Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keepin mind that the throttling is relative to the normal capability of your laptop or desktop.

Note that theThrottle list will be hidden if yourDevice toolbar is narrow.

Throttle the CPU only

To throttle the CPU only and not the network, go to thePerformance panel, clickCaptureSettings, andthen select4x slowdown,6x slowdown, or20x slowdown from theCPU list.

Throttle the network only

To throttle the network only and not the CPU, go theNetwork panel and selectFast 3G orSlow 3G from theThrottle list.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the CommandMenu, type3G, and selectEnable fast 3G throttling orEnable slow 3G throttling.

You can also set network throttling from thePerformance panel. ClickCapture Settings and then selectFast 3G orSlow 3G from theNetwork list.

Emulate sensors

Use theSensors panel to override geolocation, simulate device orientation, force touch, and emulate idle state.

The next sections provide a quick look on how to override geolocation and set device orientation. For a complete list of features, seeEmulate device sensors.

Override geolocation

To open the geolocation overriding UI, clickCustomize and control DevTools and then selectMore tools >Sensors.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the CommandMenu, typeSensors, and then selectShow Sensors.

Select one of the presets from theLocation list, or selectOther... to enter yourown coordinates, or selectLocation unavailable to test out how your page behaves whengeolocation is in an error state.

Set orientation

To open the orientation UI, clickCustomize and control DevTools and then selectMore tools >Sensors.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the CommandMenu, typeSensors, and then selectShow Sensors.

Select one of the presets from theOrientation list or selectCustom orientation to set yourown alpha, beta, and gamma values.