利用 Bookmarklet 書籤小程式快速切換網頁的開發環境

開發時會有不同的開發環境，例如 develop、UAT、staging、production 和開發中的本地端環境（例如 http://localhost:8080/feature）。

就會遇到只想切換 domain（http://localhost:8080）又想保留 path（/feature）的狀況。

這時候就可以利用書籤小程式來快速切換網頁的開發環境👍

設定

在 Chrome 瀏覽器加 Bookmarklet。

先點擊帳號圖片右邊的三個點，選擇 書籤管理員：

進去後再點擊三個點（也在右上角），選擇 新增書籤：

填入名稱和 js Code：

js Code 在開頭要加 javascript:，後面就可以放 js Code 執行 domain 取代的動作：

javascript:window.location.assign(`http://localhost:8080${window.location.pathname}`);

這樣就會用 http://localhost:8080 取代掉原本的 domain，並用 window.location.pathname 取得 path 接在 domain 後方。

這樣就可以在要切換 domain 的網頁點擊這個書籤，就會開啟 http://localhost:8080/${window.location.pathname} 的網頁了。

例如在 https://production.com/feature 點擊剛剛設定的 8080 書籤，就會直接開啟http://localhost:8080/feature。

如果還有其他想切換過去的 domain，就只要再新增一個書籤，把 js code 裡的http://localhost:8080 改成其他 domain 即可。

方便又簡單👍