VS Code调试Chrome遇「This site can’t be reached」错误，求解决方案

我来帮你一步步排查这个「This site can’t be reached」的问题，先从最基础的环节开始：

1. 先确认本地服务是否正常运行 #

这是最容易忽略的点——如果localhost:3000上根本没有运行任何服务，Chrome自然访问不了，和launch.json的配置无关。

• 直接在浏览器地址栏输入http://localhost:3000，看看能不能打开你的HTML应用；
• 如果打不开，先启动本地服务器：
  • 用Python3的话，在项目根目录运行python -m http.server 3000；
  • 用Node.js的话，运行npx serve -l 3000；
    确保服务器使用的端口和launch.json里的3000一致。

2. 补全并检查launch.json的配置 #

你的launch.json代码没写完，可能存在语法错误或缺失关键配置项。这里给你一个完整的可用示例：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "runtimeArgs": ["--disable-web-security"] // 仅当有跨域问题时添加
    }
  ]
}

• 重点注意webRoot：必须指向你的项目根目录（也就是HTML文件所在的文件夹），${workspaceFolder}是VS Code的内置变量，能自动识别当前打开的工作区，避免路径错误。

3. 检查端口是否被占用 #

3000是常用端口，很可能被其他程序（比如其他开发服务、聊天软件等）占用了：

• Windows：打开命令提示符，运行netstat -ano | findstr :3000，找到占用端口的PID，然后打开任务管理器结束对应进程；
• Mac/Linux：在终端运行lsof -i :3000找到进程，再用kill -9 <PID>杀掉占用的进程；
• 或者直接换个端口，比如把launch.json里的URL改成http://localhost:3001，同时启动服务器时也用3001端口。

4. 修复Chrome调试器的连接问题 #

有时候Chrome的调试会话会因为缓存或用户配置出问题：

• 关闭所有Chrome窗口（包括后台的），然后重新启动VS Code的调试会话；
• 可以在launch.json里添加"userDataDir": "${workspaceFolder}/.vscode/chrome-user-data"，创建一个独立的Chrome用户数据目录，避免和本地Chrome的配置冲突。

5. 排查防火墙或代理干扰 #

• 本地防火墙可能拦截了localhost的请求，试试临时关闭防火墙测试；
• 如果开启了代理，确保localhost不在代理规则中，或者直接关闭代理再尝试调试。

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