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

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

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

VS Codeのキャプチャ

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」
VS Codeのキャプチャ

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が開くので、「インストール」をクリックします。

VS Codeのキャプチャ

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

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

Browser Preview for VS Codeの使い方

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

VS Codeのキャプチャ

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

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

VS Codeのキャプチャ

VS Code内のブラウザで表示

sponsors

top of page

©2024 coliss