Spoof your Location using Google Chrome DevTools

Whenever you’re building or testing websites that tailor relevant content to users based on their geographical location or building a UI that changes depending on where the user is located, you might want to make sure that the design behaves as intended in different locations around the world. In this tutorial, we will discuss how to spoof your location in Google Chrome.

Android devices have applications to serve mock Locations to applications running on them, and there are dozens of applications on the play store that can be used to serve the mock location coordinates. However, if you’re developing on a PC, which is more likely the case, you will need to be able to do the same on the computer as well.

Google Chrome allows you to choose to override your geographic location manually and show a different location with Chrome DevTools. This helps serve the purpose discussed earlier where you want to test if your site works well in different locations around the world.

Override Geolocation: Spoof your Location on Google Chrome DevTools

Step 1: Open the Developer console and open up the Sensors Drawer.

The Developer console is fired up by pressing the F12 key or by right-clicking anywhere in the Chrome window and selecting the Inspect option. Although these methods open up different tabs in the developer console, it doesn’t make much of a difference.

• Open up the command menu

This is done by pressing Ctrl + Shift + P (Windows)

• In the Command panel, search for the term “Show Sensors” as below:

The Sensors drawer is a development tool, often used along with an array of others like viewport size and throttling of both CPU and network speeds while emulating mobile devices for compatibility testing, very useful while developing PWAs.

In this drawer, you can select not only the Geolocation Override (you can also set it to a state of unavailability if your test cases include such a scenario) but also the Orientation and Touch Capabilities of the device you’ll hereby be emulating. We say emulating here because the working of this feature is by emulating a different device with the properties you choose to set.

Choose your preferred location

• Select the location you want to emulate on your virtual device from the dropdown.

The change will be reflected in your website near-instantly (If not refresh the browser).

Google maps attempt to read the Geolocation of the device and thus, reads the emulated location.

However, as told earlier, it doesn’t work if your location is being identified by your network location or IP address via your ISP.

Here, the server location shows Bangalore, which is the right location even though the Geolocation is emulating Mountain View, California.

Add your own locations

If you don’t find your desired location in the dropdown, you can always add your own locations of choice. To do this:

• Click on Manage beside the dropdown menu.
• A setting panel opens up that has the list of locations currently available for emulation.
• You can click on Add location.
• Type the name you want to identify this location with, and plug in the coordinates to it. You can get the coordinates from Google Maps.
• This new location will be added to the list of available coordinates to emulate.

You can also see all the aforementioned features like List of Devices to emulate, and throttling profiles in these tabs within the settings panel.