「VS Code」内から「Microsoft Edge」の開発者ツールが利用可能に：開発者ツールの「要素」と「ネットワーク」に対応

Microsoftはオープンソースコードエディタ「Visual Studio Code」向けの拡張機能「Microsoft Edge Tools for VS Code」の一般提供を開始した。Webアプリケーションやサービスを開発する際にツールを切り替える必要がなくなり、開発者の負担も減るという。

[＠IT]

　Microsoftは2020年10月1日（米国時間）、オープンソースコードエディタ「Visual Studio Code」（以下、VS Code）向けの拡張機能「Microsoft Edge Tools for VS Code」（以下、Edge Tools for VS Code）の一般提供開始を発表した。

　開発者は「Microsoft Edge」ブラウザの「開発者ツール」に含まれる「要素」ツールと「ネットワーク」ツールをVS Codeに組み込める。

Edge Tools for VS Code拡張機能を使っているところ　VS Codeでサーバに接続してヘッドレスブラウザを開き、DOM要素を選択した後、CSSを編集している（出典：Microsoft）ここをクリックして再生

　Visual Studio Marketplaceからダウンロードするか、VS Code内からインストールして拡張機能を利用できる。

開発者ツールをエディタに組み込む理由とは

　Webアプリケーションやサービスを開発する際のワークフローでは、ルック＆フィールの調整が大きな比重を占める。そのために使われるのがWebブラウザの開発者向けツールだ。だが、開発時にWebブラウザのツールとコードエディタの間を頻繁に行き来すると、効率が悪くなり、開発者の負担も大きい。この課題を解決するために、Microsoftはエディタ内から開発者ツールを使えるようにした。

ヘッドレスとフルブラウザモードがある

　2019年に実験的な「Elements for VS Code」拡張機能を公開した後、一般提供に至るまでにEdge Tools for VS Codeにはさまざまな変更が加わった。例えば、ワークフローを簡素化するとともに、ツールの統合を進めた。

　正式版ではデバッグのためにMicrosoft Edgeインスタンスを起動する方法に変更が加えられた。既存のWebブラウザインスタンスに接続するのか、新しいWebブラウザインスタンスを起動するのか、「ヘッドレス」ブラウザを使うのかを選択できる。

　ヘッドレスオプションでは、Webブラウザのウィンドウを表示しない。VS Code内に一体化した形でWebブラウザが起動する。タスクバーにアイコンが追加表示されることもない。新しいWebブラウザインスタンスをヘッドレスにするかどうかは、拡張機能の設定で選択できる。

VS Codeの拡張機能設定でヘッドレスオプションを選択したところ（出典：Microsoft）

　ヘッドレスモードでは、Webブラウザは同一ウィンドウ内に表示される。

ヘッドレスモードでEdge Tools for VS Code拡張機能を使用しているところ（出典：Microsoft）ここをクリックして再生

　ノーマルモードではフルブラウザウィンドウが開き、ユーザーはこれを操作できる。プレビューを見ることもできる。

ノーマルモードでフルブラウザウィンドウを表示し、Edge Tools for VS Code拡張機能を使用しているところ（出典：Microsoft）ここをクリックして再生

ネットワークツールも利用できる

　Edge Tools for VS Codeでは、Microsoft Edgeの開発者ツールに含まれるネットワークツールも利用できる。ネットワークツールを利用するには、VS Codeの拡張機能設定でネットワークパネルを有効にする。

Edge Tools for VS Code拡張機能のネットワークパネルを開いているところ（出典：Microsoft）ここをクリックして再生