vscodeでlocalhost:8080で接続が拒否されましたと表示されます

Question

vscodeでHTMLを実行したいのですが、上記のようなエラーがでます。

HTMLを始めたばかりの超初心者です。

Windows10　64bit
エディター：vscode
ブラウザ:chrome

発生している問題・エラーメッセージ

about:blank

local host:8080
接続が拒否されました。
このサイトにアクセスできません。
と表示されます。

試したこと

簡単なHTMLを作成し、
エクスプローラー等で直接index.htmlをクリックすると実行されます。

vscodeから実行させた場合のみ、この様なエラーがでます。

PATHが関係したいるのかと思い、ディスクトップにファイルを置いても同様です。

何度かは実行できていたこともあるので、なにが悪いのかさっぱりわかりません。
どなたか同じような経験をされ、解決された方がおられるのではないかと思い質問しました。
よろしくお願いします。

状況を追加します。

実行方法はvscodeの実行(R)→デバックの開始F5→環境の選択でchromeです。
他の方法で実行しても変わりません。（edgeなど）

何度も上記のようなエラーになるのですが、
今回は
エラーが出ずに、launch.jsonというファイルができました。
内容は以下のものです。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

何度か実行を繰り返すと、実行(R)→デバックの開始からすぐにブラウザを選ぶ画面は出ずに、新しいウインドウが出て
about:blank

localhost:8080
となります。

よろしくおねがいします。

9/23　追加
VSCodeでエラーがでるので、他のエディターで試してみました。
Bracketsで実行できました。
なんか使いにくいような…
拡張機能を色々入れてみます。

補完機能がないの？かと思ったら拡張機能にありました、
デフォルトにしておけばいいかと思うんですが、使わない人いるのでしょうか？

引き続きよろしくおねがいします。

Comments

[coco_bauer]

「vscodeから実行させた」というのは、どういう操作を行ったのですか？　具体的に、できるだけ詳しく説明してください（その説明を質問に追加して下さい）。

ちなみに、windowsでhtmlファイルをクリックすることでブラウザで表示されるのは、.htmlなどの拡張子とデフォールトで起動するアプリ(Chromeなど）の関連付けがWindowsで為されているからです。

[reimoca]

状況を追加します。

実行方法はvscodeの実行(R)→デバックの開始F5→環境の選択でchromeです。
他の方法で実行しても変わりません。（edgeなど）

何度も上記のようなエラーになるのですが、
今回は
エラーが出ずに、launch.jsonというファイルができました。
内容は以下のものです。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

何度か実行を繰り返すと、実行(R)→デバックの開始からすぐにブラウザを選ぶ画面は出ずに、新しいウインドウが出て
about:blank

localhost:8080
となります。

よろしくおねがいします。

[Zuishin]

Debugger for Chrome はインストールしましたか？

[reimoca]

Debugger for Chrome　インストール済みでした。

[Zuishin]

ウェブサーバーは立ち上げましたか？

[reimoca]

拡張機能の　Live　Serverでしょうか？
インストールしてみましたが、同じでした。
立ち上げるというのはどういう事でしょうか？

インストールした拡張機能は
Debug for Chrome
HTML Snippets
Japanese Launguage pack for ～
Live Server
です。

[Zuishin]

インストールするだけでなく起動し、ポート番号を合わせなければいけません。

[reimoca]

go live をクリックするといきなり実行しました。
port 5500です。
ポート番号を合わすというのは、クリックするだけではだめなのでしょうか？
PORT　5500となっていますが、実行（F5)するとlocalhost:8080このサイトにアクセスできません。となります。

[Zuishin]

5500 で待っているのに 8080 を見に行ってもだめです。8080 の設定を 5500 に書き換えるか、5500 の設定を 8080 に書き換えてください。

[Zuishin]

> "url": "http://localhost:8080",

とりあえずこれを 5500 に書き換えるのが手っ取り早そうです。

[reimoca]

launch,json　8080のところを5500に変えました。

"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"

実行すると、
画面上部アドレスが入るところに　iに〇　localhost：5500/index.html
と出ます。

Bracketsで実行すると　iに〇　127.0.0.1:50638/index.htmlです。

iをクリックするとこのサイトへの接続はは保護されていません　と出ます。
安全でないということですよね。

[Zuishin]

https ではなく http で接続していることを示すアイコンです。
ローカルなのに危険もなにもないと思いますが。
心配なら https 環境を構築しても構いませんが、金銭的にも技術的にもハードルが存在します。それでも https が欲しいならやってみてください。

[reimoca]

httpsで実行してみましたが、ERRORが出ました。
ローカルなので、大丈夫なのですね。
安心しました。
ありがとうございます。

[Zuishin]

https サーバーや証明書は勝手にインストールされないので、入れた覚えがないならエラーは出るでしょうね。

Answer 1

url や webroot は サーバー上のコンテンツをデバッグするための指定です(既定)。

launch.json にこんなのを書き加えるとデバッグできるはず。

{
            "name": "Launch Chrome For file",
            "request": "launch",
            "type": "pwa-chrome",
            "file": "${file}",
},