GitHub Codespaces调试纯JS仓库：Node调试器断点不生效求助

核心问题定位 #

你当前使用的pwa-node调试配置是针对Node.js后端代码的，但miniPaint是纯前端浏览器项目，所以Node调试器无法捕获前端代码的断点。

具体解决步骤 #

1. 替换为前端浏览器调试配置 #

修改.vscode/launch.json为浏览器调试类型的配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome for miniPaint",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

如果偏好使用Codespaces内置的Edge浏览器，可将type改为pwa-msedge。

2. 启动项目本地服务 #

在Codespaces终端执行以下命令，确保项目正常运行：

npm install
npm start

等待项目启动完成，确认控制台输出显示服务运行在http://localhost:8080。

3. 验证断点有效性 #

• 确保断点设置在src/目录下的源码文件中，而非dist/目录下的编译后文件
• 检查Codespaces的端口面板，确认8080端口已完成转发（状态显示为“Active”）
• 确认项目的webpack配置中已开启sourcemap（miniPaint默认配置已开启，可查看webpack.config.js中的devtool: 'eval-source-map'项）

内容的提问来源于stack exchange，提问作者Carol.Kar