解決vscode進行chrome除錯時報錯：localhost拒絕了我們的連線請求

問題如下：

啟動chrome除錯html檔案報錯如下圖

解決方案如下：

1.vscode資料夾下的launch.json檔案配置作如下更改

{
  // 使用 IntelliSense 瞭解相關屬性。 
  // 懸停以檢視現有屬性的描述。
  // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "使用本機chrome除錯",
      "type": "chrome",
      "request": "launch",
      "file":"${file}",
      "runtimeExecutable":"C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
      //"runtimeExecutable":這裡寫自己瀏覽器的安裝路徑，按自己路徑作修改即可
      "sourceMaps":true,
      "webRoot": "${workspaceRoot}",
      "userDataDir":"${tmpdir}",
      "port":9222
    }
  ]
}

更改後如下圖

 

2.chrome檔名後追加--remote-debugging-port=9222，注意要加一個空格

 

完成配置，啟用本機chrome除錯即可