[Chrome] 用 Chrome DevTools 模擬不同國家/時區

Photo by Honey Yanibel Minaya Cruz on Unsplash

Outline:
+ 如何查看自己的 Google Chrome 預設語系?
+ 用 DevTools 模擬不同國家時區

在製作多國語系的時候，常常需要模擬不同國家，可以透過 DevTools 直接變更瀏覽器語系的話，測試起來會更方便。

如何查看自己的 Chrome 預設語系?

1. 點擊 chrome 右上角的三個點點進入「設定」

2. 滾到最底部點擊「進階」

3. 點開進階之後就會看到「語言」了

展開之後你會發現 Chrome 的語言其實是一個清單，一個陣列，在頂端的就會是你的主要語系，也可以增加刪除。

你可以在 console key 入這行看看你的語系陣列：

window.navigator.languages
// 我的：["zh-TW", "en", "es", "zh", "en-US", "zh-CN"]

並有一句話寫著「這是 Google Chrome UI 的顯示語言」，這個意思是你的 Chrome 介面的語言，如果設定為英文，那麼設定這裡的頁面、你的工具列，都會是英文。

用 DevTools 模擬不同國家時區

這是一個有一點隱藏版的小功能，平常在 devtool 的 Panel 上看不見，有兩種開啟的方式：

1. DevTools 中右上角的三個小點點 > 「More tools」 > 「Sensors」

2. 快捷鍵：「Esc」

在 DevTools 裡直接按下「Esc」也會開啟一個包含「Sensors」頁籤的視窗：

看到 Sensors 頁籤就可以看到 Location 有一個下拉可以選擇：

在這裡就可以自己選擇想要去哪個國家嚕 ✈️

這邊提供一個網友自製的測試時區網頁，進去之後可以查看現在所在時區，就知道有沒有成功了，或者變更國家之後在你的 console 下這行指令：

new Date()

也可以看到現在自己所在的時區和時間

這次的分享就到這邊，歡迎留言交流指教！🌴