【解決済み】VS Code拡張機能 [Live Server] のブラウザでのリアルタイムプレビューが機能しなくなってハマった件

僕はエディターにVS Codeを使用しているが、「Live Server」という拡張機能を入れてChromeでリアルタイムプレビューしながらコードを書いている。これが今日突然機能しなくなってハマって、解決したというお話。

「Live Server」については下記サイトで分かりやすく説明されている。
たったの3ステップでライブリロードが可能になるVisual Studio Codeの拡張機能「Live Server」がすごい!

補足として、こちらのサイトで解説されている方法はVS Code内でのプレビューであり、自分は別画面でブラウザにて確認したかったのでGoogle Chromeの拡張機能を入れて使っていた。
Chrome用拡張機能のダウンロードはこちらから。
Chromeの拡張機能: Live Server Web Extension

突然リアルタイムプレビューが出来なくなった

今までと同じ様にVS Code右下の「Go Live」ボタンを押してブラウザが立ち上がるのだが、VS Codeにてソースコードに編集を加えても、ブラウザ上で変更が反映されない。少し検索してみると、同じ状況に陥っている人がたくさんいることが分かった。
live server not reloading automatically(GitHubの掲示板)

Githabの掲示板に挙げられていた原因と解決方法7つ

上記のgithabの掲示板に書かれている解決方法をざっと挙げると以下の通り

  1. フォルダ名に入っていた「.」を消したら直ったよ!
    だめな例 http://127.0.0.1:5500/.folder/index.html
  2. VS Codeのアップデート以後動かなくなったよ(未解決)
    (2019年5月の投稿なのでその辺りのアップデート?)
  3. 文字コードにUTF-8を設定したら直ったよ!
  4. "Go Live"ボタンの代わりにCtrl-Shift-Pでファイルを開いたら直ったよ(詳細未確認)
  5. 個別ファイルでなく「フォルダーを開く」からいくと直ったよ!
  6. 設定にて autosaveを検索してafterDelayに、AutoSaveDelayを5以下に、Waitを検索してのLiveServer > Settings:Waitを低く(例えば3)に設定したら直ったよ!
  7. 設定にてuseWebExtを検索して、チェックを外したら直ったよ!

useWebExtの設定変更で復活。アップデートのせいだった?

順番に試していったが解決されず。諦めて他のリアルタイムプレビュー拡張機能の導入まで検討していたのだが、7番目の方法を試したところ、リアルタイムプレビューが復活!!

・・・が、僕は昨日今日でこんなところの設定を変更していない。なんでやねん!ということで考えられるのは「最近行われたアップデートでこのチェックが外れた」とかだろうか。ま、いずれにせよ直って良かった。
以上、どなたかの参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です