vscodeをブラウザで表示したとき、新しいタブで次々開かれてしまう

Question

VScodeでHTMLを作成しているのですが、ブラウザ（Google Chrome)で表示する際、新しいタブで次々開かれてしまいます。タグを打ち込み、ブラウザで都度確認するのですが、その都度新しいタブが開き、ものすごい数になります。通常のChromeで検索（ネットサーフィン等）する際は、新しいタブで開かれません。どのようにすれば解決できるのでしょうか。

Comments

[m.ts10806]

具体的にどういう風に操作しているのでしょうか。
省略せず記載してください。

[akiko]

はい、例えばvs codeで作成したHTMLのファイルがあります。①HTMLのbodyにタグを入力する。→Open with Live Serverでブラウザを起動する。きちんと反映されている。②vs codeに戻って同じbodyに追加でタグを入力する、もしくは修正する。→Open with Live Serverでブラウザを起動する。ここで本来なら①のタブで内容が更新（上書き）されるはずですが、新しいタブが立ち上がってしまいます。修正や追記を１０回し、都度ブラウザで確認するとブラウザのタブ左から順に１０個並ぶ感じになります。

[m.ts10806]

質問本文に追記してください。
ただ、LiveServer使ってて毎回起動するのはそのプラグインの意味がないのでは。基本起動しっぱなしで修正対応していくものだと思います（修正すれば何もせずとも反映されているはずで）

[m.ts10806]

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
It'll enable live changes without saving file
とあるので、わざわざ手動でブラウザ更新とか再度起動とかしなくてもいいのでは。
ライブリロード機能が特徴なのですし。

[akiko]

初めて利用するもので、追記の仕方を間違ってしまい、すみませんでした。vs codeを基本起動しっぱなしで修正対応していくものという理解がなく、使い方自体に問題がありました。使い方をもっと勉強します。ありがとうございました。

[m.ts10806]

今後質問することもあるかもしれませんが、今回だと「LiveServer導入済み」という前提や状況説明が最初からあればたぶんすぐ解決できたと思いますし、LiveServerを提案されることもなかったと思います。（書いてあることしか見る人は分かりません）

[m.ts10806]

あと、質問はいつでも修正できるので。

[akiko]

今後はアドバイス通りにします。ありがとうございます。

Answer 1

LiveServerというVScodeの拡張機能を使ってみてはどうでしょうか?
ライブリロード（ホットリロード）されるので便利です。
下記の記事を参考にしてみてください。
https://webdesign-trends.net/entry/14461

Comments

[akiko]

ありがとうございます。こちらはインストール済みです。

Answer 2

根本的にLiveServerの利用方法が間違っていました。基本起動しっぱなしで修正対応していくものという理解に至りました。再度起動する必要もなく、問題が解決いたしました。ありがとうございます。

Answer 3

ブラウザで都度確認する際に、ファイルをChromeにドラッグ&ドロップではなくページを更新するのはいかがでしょうか、既に試していたらすみません。

Comments

[akiko]

ありがとうございます。ページの更新は右クリックでOpen with live serverやショートカットキー（Alt+B windowsです）等で行っているのですが、更新するたびに新しいタブが次々立ち上がってしまいます。たまったタブの×印をクリックするのが大変で、何とか解決できればと色々調べているのですが、解決に至りません。