解决vscode进行chrome调试时报错：localhost拒绝了我们的连接请求

解决Chrome调试HTML文件报错及本地配置

最新推荐文章于 2025-10-11 13:10:01 发布

原创最新推荐文章于 2025-10-11 13:10:01 发布 · 2.7w 阅读

72 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js #html #webpack

vscode配置问题专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何解决在Visual Studio Code中启动Chrome调试HTML文件时遇到的错误。通过修改launch.json文件，增加远程调试端口配置，并确保指定Chrome的路径，可以成功启用本地Chrome的调试功能。关键步骤包括：更新launch.json的配置项，如`url`、`webRoot`和`runtimeExecutable`，以及在Chrome快捷方式后添加`--remote-debugging-port=9222`。

问题如下：

启动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
    }
  ]
}

更改后如下图