Visual Studio 用 Microsoft Edge 開発者ツールのアーリー プレビュー版が登場

Microsoft Edge 開発者ツール（Edge Developer Tools）が、Visual Studio Marketplace に登場しました。このツールを利用すると、開発者は Visual Studio を離れることなく、ASP.NET や ASP.NET Core のプロジェクトをその場でプレビューできます。単なる表示機能にとどまらず、Edge 開発者ツールの要素（Elements）機能を使って加えた変更が、実際にソースコードへ反映される点が大きな特徴です。これにより、開発の生産性が大幅に向上します。

リアルタイムで双方向に同期する編集体験

現在プレビュー段階にあるこのツールでは、Visual Studio 上で CSS や要素に変更を加えると、Web アプリケーションの表示がリアルタイムで更新されます。さらに、同期は双方向で機能します。つまり、ツールウィンドウ側で行った編集も、ソースコードに反映されるのです。実際の動作イメージは、以下のデモをご覧ください。

プレビュー段階ならではの制限事項

もちろん、プレビュー版である以上、搭載される機能は今後変化していく可能性があります。現時点では物足りないと感じる部分もあるでしょう。たとえば、Blazor プロジェクトにはまだ対応していません。ただし、Blazor サポートをはじめとする各種改善は、近いうちに提供される見込みです。

必要な環境と導入方法

この拡張機能を利用するには、Visual Studio 2022 バージョン 17.1 以降が必要です。Visual Studio をまだお持ちでない方は、公式の Visual Studio ダウンロード ページから入手してください。

拡張機能をインストールした後は、[ツール] → [オプション] で適切な設定を行う必要があります。詳細については、Visual Studio Marketplace のダウンロード ページをご確認ください。この便利な拡張機能をぜひお試しください。