「Edge」の開発ツールを統合し「Visual Studio Code」でWebアプリの開発を完結

Microsoftが「Microsoft Edge Tools for VS Code」拡張機能を一般リリース

　米Microsoftは10月1日（現地時間）、「Visual Studio Code」向け拡張機能「Microsoft Edge Tools for VS Code」の一般リリースを発表した。同社は「Microsoft Edge」の開発者ツールを「Visual Studio Code」に埋め込む「Elements for Microsoft Edge」をテストしてきたが、今回発表された「Microsoft Edge Tools for VS Code」は、それをさらに発展させたものだ。

　「Visual Studio Code」でWebアプリケーションを開発する際、コードエディターとは別にデバッグ用のWebブラウザーを起動し、開発サイトの機能やデザインをWebブラウザーのデベロッパーツールでチェックし、問題点があればコードエディターに戻って修正を行うのが一般的だ。すると、どうしてもコードエディターとWebブラウザーの切り替えが多くなり、開発効率が低下してしまう。そこで「Edge」の開発ツールをコードエディターに統合し、シームレスに開発が行えるようにしたのが「Elements for Microsoft Edge」であり、今回リリースされた「Microsoft Edge Tools for VS Code」だ。

「Edge」の開発ツールをコードエディターに統合し、シームレスに開発が行えるようにした「Microsoft Edge Tools for VS Code」拡張機能

　「Microsoft Edge Tools for VS Code」の特徴は、新たに2つの実験的機能が取り込まれていることだ。

　1つ目は、デバッグする「Edge」インスタンスを“ヘッドレス”で起動できるようになった点だ。ヘッドレスとはUI（ウィンドウやツールバーなど）を伴わずに「Edge」のエンジンだけを呼び出せるようにしたモード。これを使えばわざわざWebブラウザーを別のウィンドウにポップアップさせなくても、完全に「Visual Studio Code」内でプレビューを表示できる。

デバッグする「Edge」インスタンスを“ヘッドレス”で起動できるように

　2つ目は、［ネットワーク］ツールがサポートされたことだ。「Edge」の開発ツールで一番利用されるのはWebページの構造を解析する［要素］ツールであり、これは従来の「Elements for Microsoft Edge」だけで事足りた。しかし、それに匹敵するぐらい使われている［ネットワーク］ツールはサポートされておらず、ネットワークに関連する問題はデバッグ用の「Edge」を起動するか、別の拡張機能を導入する必要があった。既定では無効化されているが、これを利用すればWebアプリの開発をほぼ「Visual Studio Code」上だけで完結できるようになるだろう。

［ネットワーク］ツールがサポート（既定では無効）

　「Microsoft Edge Tools for VS Code」は現在、“Visual Studio Marketplace”から無償でダウンロード可能。「Visual Studio Code」の拡張機能マネージャーから検索して導入することもできる。ソースコードは“GitHub”で公開されており（ライセンスは“MIT License”）、不具合の修正や機能の追加リクエストはそちらで受け付けている。