Windows10下VS Code运行HTML页面遇Chrome连接拒绝问题

1. 连接被拒绝的原因及解决 #

你配置的url是http://localhost:8080/index.html，但此时没有启动本地静态文件服务器，所以Chrome无法连接到localhost:8080。解决方法有两种：

方法一：改用本地文件协议 #

把url改成本地文件路径，无需依赖服务器：

"url": "file:///${workspaceFolder}/index.html"

同时可删除webRoot配置，因为不需要映射服务器目录。

方法二：启动本地静态服务器 #

如果坚持使用localhost访问，需先启动静态文件服务器：

• 安装VS Code插件Live Server，右键HTML文件选择「Open with Live Server」，插件会自动分配端口（通常为5500），再把launch配置里的url改成对应地址，比如http://localhost:5500/index.html。
• 或使用Node.js工具http-server：先全局安装npm install -g http-server，在工作区目录执行http-server -p 8080，再启动调试。

2. Chrome打开无个人配置的解决 #

VS Code的Chrome调试默认会启动干净的临时用户配置文件，目的是隔离调试环境与日常浏览环境，避免插件、缓存干扰调试。若想使用日常的用户配置，可在launch配置中添加userDataDir字段：

找到你Chrome的用户配置文件路径（Windows 10一般为C:\Users\你的用户名\AppData\Local\Google\Chrome\User Data\Default），添加到配置里：

{
    "name": "mypage",
    "request": "launch",
    "type": "chrome",
    "url": "http://localhost:8080/index.html",
    "webRoot": "${workspaceFolder}",
    "userDataDir": "C:\\Users\\你的用户名\\AppData\\Local\\Google\\Chrome\\User Data"
}

注意路径需用双反斜杠转义，或直接使用正斜杠。

这两个问题都是用户使用VS Code Chrome调试时的常见场景，调整配置后即可正常使用。

内容的提问来源于stack exchange，提问作者kevin