「VS Code」を「Edge」の開発者ツールに接続する拡張機能 ～Microsoftが無償公開

「Elements for Microsoft Edge」v1.0.0

　米Microsoftは6月22日（現地時間）、「Visual Studio Code」向けの拡張機能「Elements for Microsoft Edge」を公開した。現在、“Visual Studio Marketplace”から無償でダウンロード可能。ソースコードも“GitHub”で公開されている。

　「Elements for Microsoft Edge」は、「Microsoft Edge」の開発ツールを「Visual Studio Code」のエディター画面で扱えるようにする拡張機能。利用できるのは開発者ツールのなかでも［Elements］（要素）タブだけだが、「Visual Studio Code」から離れることなくDOM構造やレイアウトの変更、スタイルの修正などが行えるのは便利だろう。タブだけでなく、サービスワーカーや拡張機能といった、デバッグ可能なすべてのターゲットにアクセスできるのも魅力といえる。

エディターから離れることなく、要素ツールを直接操作

　ただし、サポートされるのは現在“Microsoft Edge Insider”でテストされている「Chromium」ベースの「Microsoft Edge」のみとなる。現行の「EdgeHTML」を基盤とする「Microsoft Edge」では利用できない。

　本拡張機能をインストールすると、サイドバーに［Elements for Microsoft Edge］パネルが追加される。［+］ボタンを押すと「Microsoft Edge」の新しいインスタンス（またはタブ）が起動し、接続可能なターゲットが一覧される。一覧が古い場合は、リフレッシュボタンを押して更新しよう。

　一覧からターゲットを選択すると、［Elements］ツールが「Visual Studio Code」のタブに表示される。Webページのプレビューも「Visual Studio Code」内に表示され、自由に操作や要素の選択が行えるので、わざわざ「Microsoft Edge」へ戻る必要はない。

　そのほかにも、「Visual Studio Code」のコマンドから実行中の「Microsoft Edge」インスタンスへアタッチすることも可能。デバッグ構成を記述して、デバッグを開始する際に「Microsoft Edge」インスタンスを起動して、リモート接続することもできる。

Check out our first experimental VS Code extension: Elements for Microsoft Edge!

Install and try it out:https://t.co/i5E1Y5dmg7

Give us your feedback on GitHub:https://t.co/EhZytdEpqypic.twitter.com/uAmOOPh2G8

— Microsoft Edge DevTools (@EdgeDevTools)June 27, 2019