Is there a way to change your timezone in Chrome DevTools?

Question

I've created a tool in JavaScript that determines the current UTC time and checks if another predetermined date has passed yet.

I'd like to change my browser to another timezone and see if the tests still pass but I'm having trouble finding a way to do this.

Is there a way to do this in Chrome DevTools? If not, do any other suggestions come to mind?

Haugen

See this https://mcmap.net/q/212406/-how-to-use-a-custom-time-in-browser-to-test-for-client-vs-server-time-difference and this : https://mcmap.net/q/73740/-convert-date-to-another-timezone-in-javascript – Bioscopy

Chrome uses the timezone that comes from the operating system. So just go into your system preferences and change your timezone. – Limbourg

Does this answer your question? How to change local time zone in Chrome? – Crockett

Answer 1

To do this in Chrome Dev tools you can use the Geolocation sensor emulation. Go to the 3 dotted menu, More Tools and Sensors.

There's a Geolocation dropdown with some common locations but you can change your preferred one as well. To do that you can choose Other... in that dropdown and enter a custom Timezone ID

Here's a demo page to test it: https://mathiasbynens.be/demo/timezone and a video that shows the procedure: https://www.youtube.com/watch?v=pIpN_AuV4AI

Through

Nice! And looks like you don't need to use a location in order to set the timezones, there's a "Timezone ID" there too, located under the latitude and longitude fields, I tested with US/Central, US/Easter, US/Pacific, and they all worked. Thanks! – Haugen

This is a great tip, thanks! I added my "custom" geolocation to the list, with the lat/long and timezone id from a google search. After that I can view logs and metrics etc.. all displayed with the required local timezone for the application. – Closeknit

Funny - it seems that it doesn't take daylight saving time into consideration. – Melchor

Thank you so much, I can't believe I'm just now learning about this – Metaphase

@antoine129: yeah, best answer as a result of a feature request I filed, but received no credit for :) – Mixed

Answer 2

2020 update: see the other answer, which shows the result of a feature request I filed with Chromium to implement a way to override the timezone.

Note that the technique only works to change the location (including timezone) in that tab. Other tabs will still use the system's timezone. DevTools isn't a reliable way to spoof your timezone.

To change the timezone for all tabs in the browser (Chrome or Firefox or whatever), on Linux/MacOS, you can launch the browser with the TZ environment variable set to the desired timezone name:

TZ=America/New_York chromium-browser

Mixed

What about Windows? How can I set this variable in application shortcut, the one I have on desktop? – Polyzoarium

@Polyzoarium Windows does not use environment variables to set the time zone; you can set "set TZ=…" in a bat file, but it has no effect for usual applications. – Equi

Answer 3

July, 2023 Update:

On Chrome, press F12 to open Developer Tools:

Then, press Esc to open another panel which has Sensors tab:

Finally, selecting Location like Tokyo can set and change the browser timezone temporarily as shown below, then you can test a page by reloading the page:

If there isn't Sensors tab, you can open it from the 3 dots as shown below:

I use this function for testing internationally launched website.

Hive

Answer 4

You can also do this with the Vytal extension which uses the devtool location sensor emulation. It can spoof your timezone, locale, geolocation and user agent. You can also automatically set your location data to match your ip address.

https://chrome.google.com/webstore/detail/vytal-spoof-timezone-loca/ncbknoohfjmcfneopnfkapmkblaenokb?utm_source=4

Convulsive

Please provide some code along with your answer. – Timepleaser