VS Code配合Chrome调试JavaScript时breakpoints无法绑定问题求助

问题原因 #

内置PWA调试器解析路径时出现拼接错误，将完整的本地js文件路径重复叠加在webRoot路径之后，生成了不存在的错误路径，导致调试器无法匹配到实际文件，断点初始为未绑定状态。

解决方案 #

修改launch.json配置，添加路径映射规则纠正解析错误，修改后的完整配置如下：

{
    "version": "0.2.0",
    "console": "integratedTerminal",
    "configurations": [
        {
            "name": "teste",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost/sistemas/felina/TESTE.html",
            "webRoot": "${workspaceFolder}",
            // 新增路径映射，解决重复拼接问题
            "sourceMapPathOverrides": {
                "C:/wamp64/www/sistemas/felina/*": "${webRoot}/*"
            },
            // 可选补充：限制源文件解析范围，排除不需要的目录
            "resolveSourceMapLocations": [
                "${webRoot}/**",
                "!**/node_modules/**"
            ]
        }
    ]
}

如果修改后问题仍存在，可尝试将type字段值从pwa-chrome改为chrome，使用旧版调试协议适配1.62版本的兼容问题。

验证步骤 #

保存配置后重启VS Code调试会话，刷新页面，断点会自动绑定生效，无需手动点击激活。

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