@mizunkosekiposted at 2024-09-02

急にHTMLがデバッグできなくなった

Q&A

Closed

解決したいこと

htmlを勉強しています。
VSCodeを使用し、デバッグ時はChromeで開いています。
しかし、つい数分前まで出来ていたデバッグが、急に出来なくなりました。
解決方法を教えて下さい。

発生している問題・エラー

デバッグを実行すると以下のようになります。
先ほどまで実行可能でしたので、原因がわかりません。
ファイルエクスプローラーから、プログラムをChromeで開く場合は、実行可能でした。
VSCodeでデバッグをしたときのみ、このようになります。

該当するソースコード

html

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>

    <script src="" async defer></script>
</body>

自分で試したこと

新しいhtmlファイルを作り、実行　→　同じエラー
以下のサイトの対処法を実行　→　変わらず同じエラー
https://saisoku-area.com/localhost-%E3%81%A7%E6%8E%A5%E7%B6%9A%E3%81%8C%E6%8B%92%E5%90%A6%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82/

ファイルエクスプローラーから、プログラムをChromeで開く　→　実行可能

2Answer

@eno49conan posted at 2024-09-02

@mizunkosekiさん

実行可能の意味合いについて

ファイルエクスプローラーから、プログラムをChromeで開く場合は、実行可能でした。

実行可能というのは、以下画像のように、ブラウザでHTMLファイルの内容が表示できた、ということですよね？
（Helloは、ご提供htmlファイルに私が追記）

以下ファイルをクリック

ブラウザの表示

アドレスバーには、file:///C:/Users/user1/Documents/test/temp/test.htmlとなっている通り、実際のファイルパスが表示されます。

デバッグについて

VSCodeを使用し、デバッグ時はChromeで開いています。

このときアドレスバーは、localhost:8080となっており、エクスプローラーから開いたときとは、アドレスバーの内容が異なります。

このデバッグに関して、行った作業をスクリーンショットを含めてもう少し詳しく情報な気がしました。（参考記事・動画があれば、合わせて）

0Like

Comments

@mizunkoseki
Questioner
いろいろ試してみたところ、jsファイルをデバッグしたときに作られるlaunch.jsonというファイルが悪さをしていたみたいです。launch.jsonを消すとデバッグできました。launch.jsonはなぜhtmlに干渉してくるのでしょうか。
@eno49conan
@mizunkosekiさん

launch.jsonはなぜhtmlに干渉してくるのでしょうか。

launch.jsonについて、GoogleやらchatGPTやらで調べた上での追加質問でしょうか？
調べれば、「悪さをしていた」「htmlに干渉してくる」といった表現にはならない気がします・・・
調べて新たな疑問点が出るようでしたら、別の質問として別途投稿してみてください。
@trinos0909
実行ファイルという言葉と、htmlの記述内容と、エラーの画像(エラー自体とURL表記)から判断するに、
アプリケーション内部でサーバーを起動して動作するタイプのプログラムと思います。
今回の場合、必要な情報はhtmlそのものではなく、なんのフレームワークか、等、開発環境ですね。
開発対象自体の設定内容(A)とlaunch.jsonの内容が一致していないものと推測します。
@eno49conan さんのご指摘どおり、それを調べて理解するのが第1前提で、
その内容とAとを比較してみると、原因がわかるかと思います。

@C-0912 posted at 2024-09-04

今回の根本的な問題として、live serverなどを利用されていたのだと思われます。
ですので、URLがlocalhost:8080だったりになったのではないでしょうか？

ですから今回HTMLのコードをこちらで見せるのではなく、開発環境やどのような実行方法を用いてその結果になったのかなどの情報を載せた方がより鮮明になっていたかと思います。
問題

HTMLのソースコード
開発環境や実行環境(今回はこっち)

であり、開発環境や実行環境についてはlunch.jsonの設定を基にlocalhostのサーバーを立ち上げるので、lunch.jsonが干渉するというよりは、問題そのものがそこにあります。
サーバー立ち上げてHTMLを載せてlocalhostにて表示となるので、立上げ時でコケたのでしょう
問題の所在やこの考えが分かると幸いです。

あくまで予想ですが、サーバー立上げが上手くいかずにerr_connection_refusedになっているので、まず立上げが正しく行われるようにlunch.jsonなどの見直しが必要になっているのかと思われます。