デバッグ作業が快適に!VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
Post on:2019年1月28日
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。
ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。

Browser Preview for VS Code -GitHub
Browser Preview for VS Codeの特徴
Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。
- VS Code内でブラウザのプレビューが可能(Chrome Headlessにより)。
- 複数のプレビューを同時に開くことが可能。
- デバッグするURLを起動してChromeのデバッガーを開きながら、VS Codeでデバッグが可能。
- chrome://inspectで、Chromeのデベロッパーツールに送る。
- デフォルトのstartUrlを設定するためのオプション「browser-preview.startUrl」

Chromeのデベロッパーツールも起動
Browser Preview for VS Codeのインストール
インストールは、簡単です。
※ブラウザのプレビューにはChromeが使用されるので、Chromeがあらかじめインストールされている必要があります。
Browser Previewをインストールするには、VS Code Marketplaceにアクセスします。

Browser Preview -VS Code Marketplace
「Install」ボタンをクリックし、「Visual Studio Code.appを開く」をクリックすると、VS Codeが開くので、「インストール」をクリックします。

「インストール」をクリック
これでインストールは、完了です。
Browser Preview for VS Codeの使い方
インストールが完了したら、サイドバーの「Browser Preview」アイコンをクリックすると、起動します。コマンド「Browser View: Open Preview」でもOKです。

サイドバーの「Browser Preview」アイコン
Browser Previewは通常のブラウザと同じように使用できるので、Webサイトやlocalhostを表示することができます。

VS Code内のブラウザで表示
sponsors