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

Question

I just wrote a little piece of code to show the server time in a webpage. At the moment I just have one machine so I cannot test if the code is working.

Is there a way to tell the browser to use a time configuration different from the one configured in the OS? I have used plugins for Firefox to test different locales, I wonder if there are similar options for time tests.

Thanks.

Answer 1

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)

Answer 2

If you are into reproducibility, I suggest that you use an e2e environment, i.e. tooling that can automate browsers and allows to manipulate their time zone.

That way you won't have to fiddle around with the system time zone and you can add tests, that specifically do use different time zones, i.e. you can test your code in different time zones.

Two of the most recent popular libraries for browser automation, Puppeteer and Playwright explicitly allow setting the time zone. Using Playwright you get the ability to automate setting the time zone for all major evergreen browsers (Safari, Firefox and Chrome / ChromeEdge):

• for Puppeteer you have to use page.emulateTimezone
• for Playwright you have to use a newContext

Answer 3

There is a lot of time zone extensions available to spoof in browser level. I am using currently

After adding click option of the extension and check

Once both done, Go to any website and open developer tools and check by executing below command

new Date().toLocaleTimeString()

Answer 4

Maybe it will help someone. You can change time zone for Windows 10 using this steps:

1. Open Settings.
2. Click on Time & Language.
3. Click on Date & time.
4. Change time zone to your need.

P.s. According to the @Oscar Acevedo comment this answer is not quite correct. It's suitable for testing different time zones.

Answer 5

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.

Answer 6

This an easies way I tried to chang time zone and test it for windows 7 ^ I use tzutil

tzutil /s "Eastern Standard Time" and save it to suitable .bat file e.g Eastern_Standard_Time_zone.bat and use default_time_zone.bat conain your original system time zone to get it back after finishin tesing . this will change your time zone in blink . reference

Answer 7

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.

Answer 8

Old question, but I had a similar issue and I'll throw my fix in anyways.

What I did was run my server in a virtual machine, set the network settings to bridged so that I'd be able to access the server from my host OS as the client easily.

I then changed time settings in the VM so that there was whatever difference I wanted between the client and server.

Answer 9

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"

Answer 10

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

Answer 11

You're probably better off leaving your computer timezone intact and changing your server settings to reflect a timezone ahead or behind of you. This is usually pretty easy to do depending on the server you're using.