Brackets に Edge Inspect 機能拡張を追加する手順

インストールは、「ファイル」 メニューの 「拡張機能をインストール」 から行った方が楽かもしれません。サポートされる Brackets のバージョンは明記されていませんが （そもそも Edge Code 用に作られた物なので）、Sprint 26 以降であれば大丈夫だと思われます。

インストールすると、ツールの右側のツールバーに、Edge Inspect を呼び出すアイコン （スマホっぽい形の物） が追加されます。拡張機能として読み込まれるため、アイコンの表示は一瞬遅れます。

Brackets には、デスクトップブラウザでライブビューを行う機能があります。この機能を使うかどうかで、Edge Inspect を使う際の使い方が変わります。

ワークフロー その 1

ブラウザ内でのライブプレビューを行わない場合は、Edge Inspect のプレビュー機能を直接利用します。

1. Edge Inspect 本体を起動しておく
2. Brackets でコードを編集
3. Brackets の Edge Inspect パネルを開き、トグルスイッチを ON にする
4. 表示確認を行うデバイスの Edge Inspect アプリを起動、PC に接続する

以上で、ファイル （.html, .css, .js） を保存するごとに、デバイスに読み込まれ、表示を確認できるようになります。

ワークフロー その 2

Brackets のライブプレビューを使う場合は、少し手間が増えます。

1. Edge Inspect 本体を起動しておく
2. Brackets でコードを編集
3. Brackets の Edge Inspect パネルを開き、トグルスイッチを OFF にする
4. ライブプレビューを開始して、Chrome にページを表示
5. CSS への変更が直接反映されることを確認
6. Chrome 機能拡張 の Edge Inspect の同期設定を ON にする
7. 表示確認を行うデバイスの Edge Inspect アプリを起動、PC に接続する

です。先に Brackets と Chrome を接続する必要があるようです。

というあたりからは、今回の Edge Inspect との連携は、まだ初期の段階であることが伺えます。

Brackets のライブプレビューでは、選択された要素がハイライト表示されますが、 Edge Inspect 経由で表示されたページにはその機能がありません。また、ライブプレビュー使用時にはデバイスの表示がリアルタイムで更新されません。

などなど、制限はまだありますが、Brackets 使いにはかなり嬉しい機能です。もちろん Edge Code 使いにも。