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の機能と連動して操作することもできるようになっています。

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

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

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

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

最新記事10本