Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Simulate Mobile Devices with Device Mode in Chrome DevTools

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

Device Mode is the name for the loose collection of features in Chrome DevTools that help you simulate mobile devices. These features include:

Limitations

Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don't actually run your code on a mobile device. You simulate the 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. Use Remote Debugging to view, change, debug, and profile a page's code from your laptop or desktop while it actually runs on a mobile device.

Simulate a mobile viewport

Click Toggle Device Toolbar Toggle Device Toolbar to open the UI that enables you to simulate a mobile viewport.

The Device Toolbar.
Figure 1. The Device Toolbar

By default the Device Toolbar opens in Responsive Viewport Mode.

Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values in the width and height boxes. In Figure 2, the width is set to 628 and the height is set to 662.

The handles for changing the viewport's dimensions when in Responsive Viewport Mode.
Figure 2. The handles for changing the viewport's dimensions when in Responsive Viewport Mode

Show media queries

To show media query breakpoints above your viewport, click More options and then select Show media queries.

Show media queries.
Figure 3. Show media queries

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

Click a breakpoint to change the viewport's width.
Figure 4. Click a breakpoint to change the viewport's width

Mobile Device Viewport Mode

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

The Device list.
Figure 5. The Device list

Rotate the viewport to landscape orientation

Click Rotate Rotate to rotate the viewport to landscape orientation.

Landscape orientation.
Figure 6. Landscape orientation

Note that the Rotate button disappears if your Device Toolbar is narrow.

The Device Toolbar.
Figure 7. The Device Toolbar

See also Set orientation.

Show device frame

When simulating the dimensions of a specific mobile device like an iPhone 6, open More options and then select Show device frame to show the physical device frame around the viewport.

Show device frame.
Figure 8. Show device frame
The device frame for the iPhone 6.
Figure 9. The device frame for the iPhone 6

Show rulers

Click More options and then select Show rulers to see rulers above and to the left of your viewport. The sizing unit of the rulers is pixels.

Show rulers.
Figure 10. Show rulers
Rulers above and to the left of the viewport.
Figure 11. Rulers above and to the left of the viewport

Zoom the viewport

Use the Zoom list to zoom in or out.

Zoom.
Figure 11. Zoom

Throttle the network and CPU

To throttle the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.

The Throttle list.
Figure 12. The Throttle list

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

Note that the Throttle list will be hidden if your Device Toolbar is narrow.

The Device Toolbar.
Figure 13. The Device Toolbar

Throttle the CPU only

To throttle the CPU only and not the network, go to the Performance panel, click Capture Settings Capture Settings, and then select 4x slowdown or 6x slowdown from the CPU list.

The CPU list.
Figure 14. The CPU list

Throttle the network only

To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.

The Throttle list.
Figure 14. The Throttle list

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu, type 3G, and select Enable fast 3G throttling or Enable slow 3G throttling.

The Command Menu.
Figure 15. The Command Menu

You can also set network throttling from the Performance panel. Click Capture Settings Capture Settings and then select Fast 3G or Slow 3G from the Network list.

Setting network throttling from the Performance panel.
Figure 16. Setting network throttling from the Performance panel

Override geolocation

To open the geolocation overriding UI click Customize and control DevTools Customize and control DevTools and then select More tools > Sensors.

Sensors
Figure 17. Sensors

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu, type Sensors, and then select Show Sensors.

Show Sensors
Figure 18. Show Sensors

Select one of the presets from the Geolocation list, or select Custom location to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.

Geolocation
Figure 19. Geolocation

Set orientation

To open the orientation UI click Customize and control DevTools Customize and control DevTools and then select More tools > Sensors.

Sensors
Figure 20. Sensors

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) to open the Command Menu, type Sensors, and then select Show Sensors.

Show Sensors
Figure 21. Show Sensors

Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.

Orientation
Figure 22. Orientation

Feedback

Was this page helpful?

See Join the DevTools community for other ways to leave feedback.