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

Sensors: Emulate device sensors

Published on Updated on

Use the Sensors tab to emulate sensor input of any device:

Important

To emulate a viewport of a mobile device and throttle the network and CPU, see Device Mode.

Open the Sensors tab

  1. Depending on your operating system, press the following to open the Command Menu:

    • On MacOS, Command+Shift+P
    • On Windows, Linux, or ChromeOS, Control+Shift+P
    Using the Command Menu to open the Sensors tab.
  2. Type sensors, select Show Sensors, and press Enter. The Sensors tab opens up at the bottom of your DevTools window.

Override geolocation

Many websites take advantage of user location in order to provide a more relevant experience for their users. For example, a weather website might show the local forecast for a user's area, once the user has granted the website permission to access their location.

If you're building a UI that changes depending on where the user is located, you probably want to make sure that the site behaves correctly in different places around the world.

To override your geolocation, open the Sensors tab and, from the Geolocation list select one of the following:

  • One of the preset cities, like Tokyo.
  • Custom location to enter custom longitude and latitude coordinates.
  • Select Location unavailable to see how your site behaves when the user's location is not available.
Selecting 'Tokyo' from the 'Geolocation' list.

Simulate device orientation

To simulate different device orientations, open the Sensors tab, and, from the Orientation list, select one of the following:

  • One of the preset orientations, like Portrait upside down.
  • Custom orientation to provide your own exact orientation.
Selecting 'Portrait upside down' from the 'Orientation' list.

After selecting Custom orientation the alpha, beta, and gamma fields are enabled. See Alpha, Beta, and Gamma to understand how these axes work.

You can also set a custom orientation by dragging the Orientation Model. Hold Shift before dragging to rotate along the alpha axis.

The Orientation Model.

Force touch

To test touch events on your website, you can force touch instead of click even if you're testing on a device without a touch screen.

To trigger touch events with your pointer:

  1. Open the Sensors tab.
  2. Under the Touch drop-down list, select Force touch. Forcing touch instead of click.
  3. Click Reload DevTools in the prompt at the top.

Emulate idle detector state

The Idle Detection API lets you detect inactive users and react on idle state changes. With DevTools, you can emulate idle state changes for both the user state and screen state instead of waiting for the actual idle state to change.

To emulate idle states:

  1. Open the Sensors tab. For this tutorial, you can try it on this demo page.

  2. Enable the checkbox next to Ephemeral and, in the prompt, grant the demo page the idle detection permission. Then, reload the page.

    Granting the idle detection permission on a demo page.
  3. Under the Emulate Idle detector State drop-down, select one of the following:

    • No idle emulation
    • User active, screen unlocked
    • User active, screen locked
    • User idle, screen unlocked
    • User idle, screen locked
Selecting an idle and locked state on a demo page.

In this example, DevTools emulates an User idle, screen locked state and, in this case, the demo page starts the 10 second countdown to clear the canvas.

Updated on Improve article

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