「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はエディタ内から開発者ツールを使えるようにした。

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