Spoofing Geolocation and Orientation in Chromium

This article provides a straightforward guide for web developers on using the Sensors tab within the Chromium web browser's Developer Tools. It covers how to access the tool, override geographic coordinates to test location-aware features, and simulate device orientation angles in three-dimensional space to debug motion-sensitive web applications without requiring a physical mobile device.

Accessing the Sensors Tab

To begin spoofing sensor data, you must first open the Sensors drawer in Chromium's Developer Tools:

  1. Open the Chromium browser and navigate to the web page you want to test.
  2. Open Developer Tools by pressing F12 or Ctrl+Shift+I (Cmd+Option+I on macOS).
  3. Click the three-dot menu icon in the top-right corner of the Developer Tools pane.
  4. Hover over More tools and select Sensors.

A new Sensors tab will open at the bottom of your Developer Tools window. Alternatively, while Developer Tools is open, you can press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Menu, type Sensors, and select Show Sensors.

Spoofing Geographic Coordinates

The Location section in the Sensors tab overrides the browser's standard Geolocation API data. By default, this setting is set to "No override." Note that the web page must request location permissions for these overrides to take effect.

  • Using Presets: Click the Location dropdown menu to select from a list of predefined cities, such as Berlin, Mumbai, or Mountain View. Selecting a city immediately updates the coordinates, timezone, and locale sent to the browser.
  • Entering Custom Coordinates: Select Other... from the dropdown menu to reveal input fields. Here, you can type exact Latitude and Longitude coordinates, along with a specific Timezone ID (e.g., America/New_York) and Locale (e.g., en-US).
  • Saving Custom Locations: If you frequently test a specific set of coordinates, click the Manage button next to the dropdown. This opens the Settings menu where you can click Add location... to save your custom coordinates to the preset list.
  • Testing Error Handling: Select Location unavailable from the dropdown to simulate a failed GPS signal. This allows you to verify how your application behaves when it cannot retrieve the user's location.

Simulating Device Orientation

Located directly beneath the Location settings, the Orientation section allows you to simulate the physical movement and tilt of a mobile device using the accelerometer and gyroscope APIs.

  • Using Orientation Presets: Click the Orientation dropdown menu (set to "Off" by default) to choose a standard device position, such as Portrait, Portrait upside down, Landscape left, or Landscape right.
  • Entering Custom Angles: Select Custom orientation from the dropdown to manually input specific rotation angles into three fields:
    • Alpha (α): Controls rotation around the z-axis from 0° to 360° (simulating a compass heading when the device is flat).
    • Beta (β): Controls front-to-back tilt around the x-axis from -180° to 180°.
    • Gamma (γ): Controls left-to-right tilt around the y-axis from -90° to 90°.
  • Using the 3D Model: When in Custom orientation mode, a 3D illustration of a smartphone appears. You can click and drag this model with your mouse to dynamically change the beta and gamma angles in real-time. To adjust the alpha angle using the mouse, hold down the Shift key while clicking and dragging the model.
  • Resetting Orientation: Click the Reset button next to the 3D model to immediately return the alpha, beta, and gamma values to their default state (alpha: 0, beta: 90, gamma: 0).