【VS Code】Microsoft公式のHTMLプレビュー機能が便利すぎる件

2021.12.30

私はWEB系のプログラマではないのですが、趣味で少しJavaScriptを触る機会があり、その折に見つけたLive PreviewというHTMLプレビュー機能が非常に便利だったので今回ご紹介したいと思います。

Live Previewのここが良い
Live Previewの使い方
おまけ
- おすすめの設定
- 注意点
参考

Live Previewのここが良い

VS Codeのウィンドウ内でHTMLのプレビューが可能
→ブラウザを別ウィンドウで開く必要がない！
開発者ツールもVS Code内で使用可能
→開発者ツールを別ウィンドウで開く必要がない！
WEBサーバの環境を自動で用意してくれる
→ローカルファイルが原因のエラーが起きにくい！
Microsoft公式
→会社での利用申請が通りやすい！(会社によるかも)
機能がシンプルで分かりやすい
→分かりやすい！

※個人的には”〜blocked by CORS policy”とかのエラーでどハマりしたので３つ目がとても嬉しいです。

Live Previewの使い方

１．インストール

インストールは他の拡張機能と同じでとても簡単です。

VS Codeの拡張機能で”live preview”と検索するとLive Previewがトップに出てくるはずなので、
後はインストールをクリックするだけです。

２．プレビューを表示する

Live Previewをインストールすると、HTMLファイルを開いた際に右上にプレビューボタンが表示されるようになります。

プレビュー表示を行いたい場合は、このボタンをクリックします。

クリックすると、以下のようなプレビュー画面がVS Code内に表示されます。

後述の設定でも出てきますが、ファイルを更新するとプレビュー画面も自動的に更新されます。

３．(ブラウザの)開発者ツールを使用する

開発者ツールを開く場合は、プレビュー画面右上のボタンにある”Open DevTools Pane”をクリックします。

“Open DevTools Pane”をクリックすると、以下のようにVS Code内に開発者ツールを開くことができます。

おまけ

注意点

①開発中の拡張機能である点
この記事を書いている時点では、バージョンv0.2.11で、プレビューのバッジがついています。
機能の説明欄にもWARNING: this extension is still under development!と思いっきり記載されているので、プレビュー版なんだと割り切って利用した方が精神衛生上良いかと思います。

②iframeがsandbox化が働く点
Live Previewのプレビュー画面はiframeとして実装されているため、iframeのsandbox属性による制約が発生します。

確認したところ、Live Previewで生成されるiframeのsandbox属性には以下が指定されていました。

sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"

例えば、allert()を使用する場合はallow-modalsの指定が必要ですが、上記の通り、指定されていないので、以下のようなエラーが出ます。

Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

解消方法が見つからなかったので、こういった場合はブラウザを使うしかないのだと思います。

参考

Live Preview拡張機能の公式ページ
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

iframeの属性について
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

設定名	“livePreview.autoRefreshPreview”
デフォルト値	“On All Changes in Editor”
おすすめの設定値	“On Changes to Saved Files”