1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSCodeでChromeのデバッガができないとき

Last updated at Posted at 2022-05-01

WindowsでVSCodeでChromeのデバッガを使おうとしたときうまくつながらなかったので、その解決策を備忘録として書いておきます。

事象:
「このサイトにアクセスできませんlocalhost で接続が拒否されました。 次をお試しください 接続を確認する プロキシとファイアウォールを確認する」というメッセージがでる。

解決策:
サーバーを立ち上げ、ポート番号をサーバーが立ち上がっている番号に合わせる。

1)VSCodeのライブサーバー機能をオンにする。
ライブサーバを立ち上げるとポート番号が画面下のタスクバーに表示されます。

2)launch.jsonにあるURLをサーバが立ち上がっている番号に手動で合わせる。
まず、デフォルトで作られるlaunch.jsonがこちら。portは8080になっている。
url pointing to port 8080

これを手動でサーバの立がっている番号に書き換える。このときは5501でした。
url pointing to port 5501

こうしておいてデバッガのlaunchボタン▷をクリックすると繋げました。
debugger icon on the left

以上です。

1
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?