VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に

2020年10月6日

マイクロソフトは、コードエディタのVisual Studio Code(以下VS Code)とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。

ChromeやMicrosoft Edgeには、いわゆる「DevTools」と呼ばれるWeb開発者向けのツールが内蔵されており、Webブラウザの画面に対応するHTMLの要素を選択する機能や、HTMLの要素に適用されているCSSを表示する機能などを提供しています。

WebサイトやWebアプリケーションの開発者はこのDevToolsの情報を見ながら、該当するHTMLやCSSのコードをテキストエディタで開いて修正などの作業が行われています。

今回正式版となったMicrosoft Edge Tools for VS Codeは、その名称から分かる通り、コードエディタのVS CodeとWebブラウザのMicrosoft Edgeを緊密に連携させることで、Microsoft EdgeのDevToolsからすぐにVS Codeで該当するHTMLやCSSのコードの修正などが行える機能を提供します。

特に便利なのは、新たに追加された「ヘッドレスモード」です。

ヘッドレスモードでは下記の画面のようにMicrosoft Edgeはウィンドウを持たず、VS Code内のタブにWebブラウザのプレビュー画面として表示され、同時にDevToolsの機能もVS Codeのペインの中に表示されます(ローカルマシン上に置いたHTML/CSSも表示できるように、ローカルWebサーバも機能するようです)。

fig

このDevToolsを操作しつつ、対象となるソースコードもDevToolsから開いてVS Codeのタブで表示し、HTMLやCSS、JavaScriptのコードなどを編集することが可能。

Webブラウザの表示、DevToolsによるHTMLやCSSの選択や参照、そしてコードの編集すべての作業をVS Codeのウィンドウ内で完結できます。

これによりプログラマはウィンドウの切り替えなどにわずらわされることなく、効率的なWebアプリケーション開発を行えることが期待できるでしょう。上記のツイート内のGIF動画を拡大して参照していただけると、その便利さが分かるのではないでしょうか。

通常のノーマルモードも用意されており、こちらではMicrosoft Edgeのウィンドウが表示され、VS Codeのペイン内に表示されているDevToolsの機能と連動して操作することもできるようになっています。

あわせて読みたい

プログラミング言語 Microsoft Edge Visual Studio




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本