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

エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能（Chrome Headlessにより）。 複数の

[coliss]

VS Code内にChromeをプレビューとして表示させることができる機能拡張

[closer]

いや、いろいろ使い道あるのでfirefoxとかedgeにも対応してからでなくてもどんどん言って。

[gachapining]

とても便利そうに見えるけど、実際にはマルチディスプレイ使うと思うのであまり恩恵は感じられなかった。直接 DevTools は開けないし、React, Vue, Angular などのデバッグ用のエクステンションも利用できない。

[su_zu_ki_1010]

Chromeだけって時点で使わないよね。firefoxとかedgeにも対応してから言ってほしい。

[aquarickn]

もうChromeだけで良いからコレ最高の機能

[karatte]

“デバッグするURLを起動してChromeのデバッガーを開きながら、VS Codeでデバッグが可能。 chrome://inspectで、Chromeのデベロッパーツールに送る。 デフォルトのstartUrlを設定するためのオプション「browser-preview.startUrl」”

[koogawa]

オッ これ良さそう

[kabacsharp]

“VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。”

[demAge]

せっかくマイクロソフトなんだし、純正IEプレビューツールとか…出ないかな…出ないよな…対応めたいし多分MSもやめてほしいんだろうけど現実問題やめられない…IEをEdgeに書き換えるアプデとかしてくれないかな…

[maecchi]

マルチディスプレイじゃないときは便利そう。VueやReactのデバッグツールが使えると便利なんだけどできないっぽい。

[yuki_2021]

あれば便利なやつ。後で気力があれば試す。

[ultimate-ez]

あら、いいですねぇ

[kzm1760]

便利そう

[programmablekinoko]

chrome on VSCode on Chromium ... 一周回った感

[kote2kote2]

デュアルモニタが使えない時に便利