Domain Switcherの紹介
Domain Switcherは、URLのプロトコル、ドメイン、ポートの部分だけを切り替えられるツールです。
パスやパラメータは保持してくれます。
大抵のWebサービスの開発現場では、環境を開発、ステージング、本番などと複数持っていると思います。
よって、以下のような場面で便利に使えます。
- 本番環境で出たバグを再現する時にURLをもらって、ステージング環境や開発環境で確認したい
- 開発途中の画面を今の本番環境の同じ画面と比較したい
使い方
インストール
以下のURLからインストールします。
https://chrome.google.com/webstore/detail/domain-switcher/lbehdhpgigdlinfkidifkbhjnaglfojc
設定
- Chromeの右上にアイコンが表示されるので、クリックして「オプション」を選択します。
- 「Add project」を押して、ドメインを変更したいプロジェクトを追加します（プロジェクト名を付けるかどうかは任意です）
- 環境ごとのドメイン（プロトコル、ポート番号を含む）を設定します。
- 「Save」を押して設定を保存します
設定の共有
職場や仲間となっているサービスなどで、他の開発者やカスタマーサポートの人にも設定を共有したいことがあると思います。
一人ひとりが一つずつ設定しても良いのですが面倒ですよね。
Domain Switcher は Local Storage で設定を保持しているので、ちょっと裏技っぽいですが以下のようにして出来ます。
共有元のブラウザで、ディベロッパーツールを開き、以下のコードの出力（JSONの文字列です）をコピーします。
localStorage['domainSwitcher']
1でコピーした文字列を、共有先のブラウザでディベロッパーツールを開き、先程取得したところに代入してしまいます。
JSON内にダブルクォーテーション"が含まれるので、'で囲わないとエラーになります。
localStorage['domainSwitcher'] = '[{"name":"group-mixer","editMode":false,"envs":[{"url":"localhost:3000"},{"url":"https://group-mixer.herokuapp.com/"}],"showEdit":false}]'
DomainSwitcherの設定画面を開くと（既に開いている場合はリロードすると）、設定が反映されていることが確認できます。
あとがき
同じような拡張機能を自分で作ろうかなーと思っていたのですが、やっぱり既にあったので車輪の再発明はやめておきました。
個人的には「設定の共有」が重要だと思っていて、マイクロサービス化していて、ドメインが分かれているようなサービスの開発に関わっていたり、個人で色んなプロジェクトをやっていたりすると、更に有用性が増すのでは、とか思いました。
また、この記事を書いていて、自分の文章って硬いなー、マニュアル作っていたせいかなーとか思いました。
あと、設定の例にある https://group-mixer.herokuapp.com というURLは、アドベントカレンダーで書いた記事の内容をサービスとして実装したものだったりします。まだ最低限の動作しかしませんが。
以上です。