How to Emulate Device Orientation and Geolocation Overrides in Google Chrome DevTools

Modern mobile web applications increasingly depend on hardware sensor interfaces, such as the Geolocation API for location-aware content and the DeviceOrientation Event specification for motion-driven interfaces, 3D Canvas visualisations, and immersive web experiences. However, validating these hardware-dependent features during desktop development poses obvious logistical challenges. Rather than deploying code to physical smartphones or walking outside to test GPS coordinate changes, web developers can leverage Google Chrome DevTools’ built-in Sensors drawer. This diagnostic suite allows engineers to mock precise geographical coordinates, simulate physical gyroscope movements, and test sensor failure states directly from a workstation.

Opening the Sensors Drawer Panel in Chrome DevTools

The Sensors emulation suite is housed inside the DevTools auxiliary drawer rather than the main top navigation tab bar:

1. Open Google Chrome DevTools by pressing F12 (Windows/Linux) or Cmd + Option + I (macOS).
2. Press Esc to toggle the secondary Drawer open if it is not currently visible at the bottom of the screen.
3. Click the three-dot menu icon located on the left side of the drawer’s tab strip.
4. Select More tools from the context menu and choose Sensors.
5. The Sensors panel opens, displaying dedicated controls for Location, Orientation, and Touch emulation.

Overriding Geolocation Coordinates and Simulating Location States

The Location section allows you to override the browser’s reported GPS coordinates:

• Preset Global Cities: Click the Location drop-down menu to choose from pre-configured metropolitan destinations, such as London, Tokyo, San Francisco, or Mumbai. DevTools automatically populates the corresponding latitude, longitude, and timezone identifier.
• Custom Coordinates: Select Other… from the drop-down menu. Enter arbitrary floating-point values into the Latitude and Longitude fields. You can also specify an exact Timezone ID (e.g., Europe/London) and Locale to verify that your application adjusts date formatting and regional currency symbols accordingly.
• Testing Error and Unavailable States: Geolocation testing must account for user denials or hardware faults. Selecting Location unavailable from the drop-down menu forces navigator.geolocation.getCurrentPosition() to execute its error callback with a POSITION_UNAVAILABLE error code, enabling you to verify fallback UI flows.

Emulating Device Orientation and Gyroscope Motion

Beneath the Location section, the Orientation suite simulates mobile device tilt along three physical spatial axes:

• Interactive 3D Phone Model: DevTools renders an interactive 3D smartphone wireframe. Click and drag the model with your mouse cursor to tilt the device physically in 3D space. The interface updates the alpha, beta, and gamma rotational values in real time.
• Alpha (Z-axis rotation): Represents the compass heading of the device, ranging from 0° to 360°.
• Beta (X-axis tilt): Represents the front-to-back tilt, ranging from -180° to 180°. A value of 0° indicates the device lies completely flat on a horizontal table.
• Gamma (Y-axis tilt): Represents the left-to-right tilt, ranging from -90° to 90°.
• Standard Orientation Presets: You can select standard postures from the drop-down menu, including Portrait, Landscape left, Landscape right, or Display down.

Testing Touch Screen Emulation and Pressure Sensitivity

The Sensors panel also includes a Touch override section:

1. Under the Touch drop-down, select Device-based to respect the current responsive viewport device emulation, or select Force enabled.
2. When active, your desktop mouse cursor renders as a circular touch contact point, firing synthetic touchstart, touchmove, and touchend DOM events rather than standard mouse events.
3. This enables you to validate swipe gestures, mobile touch carousels, and multi-touch interactions without needing physical mobile hardware.

Verifying Geolocation and Orientation Events in the Console

To confirm that your web page is actively intercepting sensor overrides, switch to the Console panel and run quick verification listeners:

navigator.geolocation.getCurrentPosition(
  pos => console.log("Lat:", pos.coords.latitude, "Lon:", pos.coords.longitude),
  err => console.error("Geo error:", err.message)
);

window.addEventListener("deviceorientation", event => {
  console.log("Alpha:", event.alpha, "Beta:", event.beta, "Gamma:", event.gamma);
});

As you adjust values or rotate the 3D phone model inside the Sensors drawer, the console logs immediate event updates matching your emulated inputs.