デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code

Post on:2019年1月28日

sponsors

エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。

ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。

Browser Preview for VS Codeの特徴

Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。

Chromeのデベロッパーツールも起動

インストールは、簡単です。
※ブラウザのプレビューにはChromeが使用されるので、Chromeがあらかじめインストールされている必要があります。

Browser Previewをインストールするには、VS Code Marketplaceにアクセスします。

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

「インストール」をクリック

これでインストールは、完了です。

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

サイドバーの「Browser Preview」アイコン

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

VS Code内のブラウザで表示