How to use a custom time in browser to test for client vs server time difference

Solution 1:

Create a new empty directory for a separate Chrome user profile. E.g. with

mkdir ~/chrome-profile

You specify the TZ environment variable. You can see the valid timezones for example here, in column TZ.

To start Chrome, use these commands:

for Mac OS X: TZ='US/Pacific' open -na "Google Chrome" --args "--user-data-dir=$HOME/chrome-profile"
for Linux: TZ='US/Pacific' google-chrome "--user-data-dir=$HOME/chrome-profile"

Solution 2:

Unfortunately, JavaScript is only aware of the current time zone, as it is set by the operating system. There are no facilities to let the Date object use a different time zone in a particular context. There are some libraries to do time zone conversions, but that won't help for what you are asking.

On Linux, Mac OSX, and other *NIX systems, you can set the TZ environment variable. See Benedikt Köppel's answer for details.

However, there is no facility for this on Windows. Some Windows programs may pick up on the TZ environment variable, but those that do will not necessarily interpret it correctly, as they aren't wired up to support IANA time zone names. More on this here and here.

Solution 3:

On popular demand (kidding!), the explanation.

Google Chrome reads the environment variables to get the timezone its running in. Apparently all instances of Chrome share the value (not tested). In order to force a timezone, we need to a) set the environment variable to the timezone we want, b) kill all existing instances of Chrome, c) Print the current timezone to confirm, and d) Start Chrome with the intended timezone.

The below shell script is tested with OS X but should work for others too.

export TZ='US/Pacific'

killall Chrome
date
open /Applications/Google\ Chrome.app

Solution 4:

Chrome seems to update its TimeZone as soon as you change it in Windows. Firefox seems to store the timezone value of the system at startup.

With Visual Studio it looks like you can turn the trick on its head. It seems that the Timezone is only read when you first start the debug process. So In my case, what I did was set the TimeZone to, for example, Eastern Standard Time. Start the Visual Studio debugger. I then changed the TimeZone to, for example, Pacific Standard time. The server at this point remained in the Eastern timezone, while my browser was in the Pacific timezone. Now I was able to test the client browser behavior just fine.

If you wanted to test a client in Japan, then just update your TimeZone and the browser will follow it. As long as you don't restart the debug process your server timezone will not change. Also just changing the time (as opposed to the timezone) did not work.

Solution 5:

You don't need to change OS variables or extensions to do this in 2021.

Chrome Dev Tools > Hamburger Menu > More Tools > Sensors

On the Location section select your location or give it a timezone id (e.g. America/Chicago, America/New_York) enter image description here