90

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.

Marcelo
  • 2,232
  • 3
  • 22
  • 31
  • Also see http://stackoverflow.com/questions/12220717/how-to-mock-the-browsers-timezone/31379288#comment60641443_31379288 and http://stackoverflow.com/questions/11453740/fake-time-zone-for-web-app-testing and http://stackoverflow.com/q/4976696/632951 – Pacerier Apr 09 '16 at 14:31
  • Chrome now has this: https://stackoverflow.com/a/60008052/3370010 – waternova Jul 20 '21 at 18:48

11 Answers11

159

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"
Benedikt Köppel
  • 4,853
  • 4
  • 32
  • 42
  • 6
    For me, on Mac OSX, had to type the full path instead of ~/chrome-profile shortcut, but other than that worked great! This should be the accepted answer... – Peter P. Oct 19 '16 at 00:08
  • Thanks, this is a great post! The ~/chrome-profile shortcut worked fine for me on Mac OS X. – Dylan Lindgren Feb 09 '17 at 01:23
  • 1
    Amazing! Thank you. Also, I renamed the `chrome-profile` dir to have more specific name for my needs. – Yevhen Dubinin May 05 '17 at 07:38
  • 3
    Fantastic answer addressing the core issue and it doesn't require changing the OS timezone. And, yes, this should be the accepted answer as it enables testing with Chrome to address the OP's question. – bmacnaughton Jul 16 '17 at 00:08
  • 4
    The chrome profile part wasn't necessary for me. I simply ran `TZ='US/Pacific' open -na "Google Chrome" --args` on macos. works perfectly – connorbode Nov 24 '17 at 21:02
  • 4
    How can I do this on windows? – Platte Gruber Feb 09 '18 at 19:15
  • @pgruber see Mustansir Golawala 's answer below. Basically you need to start debug with windows in your server timezone, then set windows to your client's timezone. VS will remain in the timezone that was set at the start of debug; Chrome will update on the fly to the new timezone. – monty Mar 03 '19 at 22:48
  • 1
    applause! I did super fancy tricks for a few years when the solution is so simple and elegant... – d-d Apr 28 '19 at 16:24
  • Great answer! Quoting `'US/Pacific'` isn't necessary. Even multi-word timezones use `_`s instead of spaces (e.g. `America/Los_Angeles`), so the apostrophes aren't necessary. – Dan Dascalescu Aug 14 '19 at 02:48
34

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.

Matt Johnson-Pint
  • 230,703
  • 74
  • 448
  • 575
  • Thanks for your answer. I'm using PHP. I'm not aware of the full requirements, a friend of mine asked me to help him to display it. – Marcelo May 08 '13 at 20:14
  • 13
    Chrome 45 now updates the timezone immediately, but Firefox 40 still doesn't.. and I hope that never changes, or else we're screwed! Stupid timezones! Developer's plague.. – Alkanshel Sep 16 '15 at 20:06
  • 4
    @Pacerier Not anymore. Chrome will ***immediately*** detect the timezone settings of your OS. Example: in the console, enter `new Date()`. Change your timezone. Enter `new Date()` in the console again. Each date will show whichever timezones you had set before and after you changed it. – keeehlan Aug 16 '16 at 22:37
32

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

Marcos
  • 1,043
  • 10
  • 15
8

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
Pacerier
  • 86,231
  • 106
  • 366
  • 634
Arif Amirani
  • 26,265
  • 3
  • 33
  • 30
  • 3
    While this code sample may possibly answer the question, it would be preferable to include some essential explanation to your answer. As it stands now this answer adds little to no value for future readers. – oɔɯǝɹ Feb 08 '15 at 21:49
  • 1
    `killall` is dangerous dude.. I'll edit the answer to add some warning to it. – Pacerier Apr 09 '16 at 14:41
  • 6
    @Pacerier so `killall`in bold will explain why it is dangerous or even warn people that it is dangerous...? – henk Nov 27 '17 at 22:34
6

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.

Mustansir Golawala
  • 69
  • 1
  • 3
4

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

After adding click option of the extension and check enter image description here

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

new Date().toLocaleTimeString()
Siva Kannan
  • 2,237
  • 4
  • 27
  • 39
2

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.

Matt Buckborough
  • 44
  • 5
2

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.

Maksim K
  • 41
  • 4
  • 2
    He needs to see the difference between environments server and client, because he's testing it on the same pc, so if he follows what you're saying both are going to change(that's not what he's expecting) – Oscar Acevedo Feb 25 '20 at 21:11
  • Yes, you are right. I understood the question incorrectly. I needed to imitate work of the app in different time zones, so I used this approach. – Maksim K Feb 28 '20 at 18:40
1

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

Salem
  • 654
  • 7
  • 24
0

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):

Christian Ulbrich
  • 3,212
  • 1
  • 23
  • 17
-3

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.

Alkanshel
  • 4,198
  • 1
  • 35
  • 54
  • 2
    Datetimes should be stored in UTC, changing the idea on a real server for testing a webapp is a bad idea (or even letting the system timezone affect date persistence or you app at all). Really hope you mean your "local dev server". – Lincoln B May 13 '16 at 20:10