使うかどうかは別として調べてみると意外とオプションが充実していたので、何ができるかまとめ。
確認バージョン : v2.26.3
オプションのURL : http://localhost:3001/
ヘッダー右上
RELOAD ALL
開いている全てのブラウザシンクのページを更新する。
NEW TAB
新規タブでブラウザシンクのページを開く
SCROLL TOP
開いている全てのブラウザシンクのページのスクロール位置をページ最上部に移動させる。
RELOAD ALL
開いている全てのブラウザシンクのページをルートURLに遷移させる
Overview
Local
自分だけ見れるURL
External
同じネットワーク内なら誰でも見れるURL
※社内のwifiで繋げているスマホ端末や、他の人に共有すればサーバーに上げずに確認が出来る。
Serving files from
ルートになっているローカルフォルダ
Current Connections
接続されているブラウザ一覧
SyncOption
CodeSync
ローカルのファイルが変更されたら自動的に反映させるか
Clicks
クリックの挙動を開いている全ブラウザシンクのページに同期させるか。
Scroll
スクロールの挙動を全ブラウザシンクのページに同期させるか。
Forms: submit
フォーム送信を全ブラウザシンクのページに同期させるか。
Forms: inputs
テキスト入力を全ブラウザシンクのページに同期させるか。
Forms: toggles
ラジオ、チェックボックスの変更を全ブラウザシンクのページに同期させるか。
History
クリックで遷移したページの記録
※ディレクトリを直接入力した場合は残らない
Remote Debug
Remote Debugger (weinre)
ブラウザシンクのオプションページで見れるデバッガーを表示させる。
色々と使いにくい。
CSS Outlining
ブラウザシンクページ上の要素にアウトラインを表示させる
CSS Outlining
ブラウザシンクページ上の要素の重なりを可視化させる。
Overlay CSS Grid
ブラウザシンクページ上にグリッド線を表示させる。
Plugins
ブラウザシンクに含まれているプラグインを表示させる。
デフォルトでは入っていないため、必要に応じて別途インストールが必要。
Network Throttle
ネットワークの速度を指定したURLを作成する。
Help / About
ヘルプ
オプションを利用しての使い方例 ※同ネットワーク内限定
・ディレクターまたはデザイナーさんにcssアニメーションの調整等を依頼された際にExternalのリンクを共有し、リアルタイムで速度やタイミングを調整して確認してもらう。
・テストサーバーが用意されてない、または何らかの理由でテストサーバーを触れない状態でチェックをお願いしたい時にSyncOptionを全てoffにして、Externalのリンクを共有する。