Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Simulate mobile devices with Device Mode

Published on Updated on

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

Device Mode is the name for a 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.

By default, the Device Toolbar opens in viewport with Dimensions set to Responsive.

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 this example, the width is set to 480 and the height is set to 415.

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

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

The width presets bar.
Mobile SMobile MMobile LTabletLaptopLaptop L4K
320px375px425px768px1024px1440px2560px

Show media queries

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

Show media queries.

DevTools now displays two additional bars above the viewport:

  • The blue bar with max-width breakpoints.
  • The orange bar with min-width breakpoints.

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

Click between breakpoints to change the viewport's width.

To find the corresponding @media declaration, right-click between breakpoints and select Reveal in source code. DevTools opens the Sources panel at the corresponding line in the Editor.

Reveal in source code drop-down menu.

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. Click More options More options. > Add device pixel ratio.

    Add device pixel ratio.
  2. In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.

    Setting the DPR value.

Set the device type

Use the Device Type list to simulate a mobile device or desktop device.

The Device Type list.

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

The table below describes the differences between the options. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon refers to what type of cursor you see when you hover over the page. Events fired refers to whether the page fires touch or click events when you interact with the page.

OptionRendering methodCursor iconEvents fired
MobileMobileCircletouch
Mobile (no touch)MobileNormalclick
DesktopDesktopNormalclick
Desktop (touch)DesktopCircletouch

Mobile Device Viewport Mode

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

The Dimensions list.

For more information, see Add a custom mobile device.

Rotate the viewport to landscape orientation

Click Rotate Rotate. to rotate the viewport to landscape orientation.

Landscape orientation.

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

The Device Toolbar.

See also Set orientation.

Show device frame

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

Show device frame.

Note: If you don't see a device frame for a particular device, it probably means that DevTools just doesn't have art for that specific option.

In this example, DevTools shows the frame for the Nest Hub.

The device frame for the Nest Hub.

Add a custom mobile device

To add a custom device:

  1. Click the Device list and then select Edit.

    Edit.
  2. On the Settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own.

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

    Creating a custom device.

    The device pixel ratio, user agent string, and device type fields are optional. The device type field is the list that is set to Mobile by default.

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

Show rulers

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

Show rulers.

DevTools shows rulers above and to the left of the viewport.

Rulers above 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 the Zoom list to zoom in or out.

Zoom.

Capture a screenshot

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

The Capture screenshot option in the More options menu.

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

Throttle the network and CPU

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

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.

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.

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.

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

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.

Emulate sensors

Use the Sensors tab to override geolocation, simulate device orientation, force touch, and emulate idle state.

The sections below provide a quick look on how to override geolocation and set device orientation. For a complete list of featrues, see Emulate device sensors.

Override geolocation

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

Sensors

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

Show Sensors

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

Geolocation

Set orientation

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

Sensors

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

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

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.