VSCode调试Docker中Angular应用需先触发浏览器断点才能生效？

问题原因 #

• Firefox调试器默认会延迟加载源映射，VSCode启动调试时，源映射还未完成解析绑定，导致断点无法触发；手动打开浏览器调试器会强制触发源映射加载，后续VSCode就能正常关联断点。
• Angular通过webpack打包后，源码的实际webpack路径可能带./前缀（如webpack:///./src），而你的pathMappings配置里用的是webpack:///src，初始映射匹配失败。

解决方法 #

• 调整pathMappings匹配规则：把src对应的url改成webpack:///./src，覆盖Angular打包后的实际路径：

"pathMappings": [
    {
        "url": "webpack:///./src",
        "path": "${workspaceFolder}/webapp/src"
    },
    {
        "url": "webpack:///node_modules",
        "path": "${workspaceFolder}/webapp/node_modules"
    },
    {
        "url": "webpack:///webpack",
        "path": "${workspaceFolder}/webapp/webpack"
    }
]

• 添加sourceMapPathOverrides强制映射：在调试配置里补充该字段，兼容不同格式的webpack路径：

"sourceMapPathOverrides": {
    "webpack:///./src/*": "${workspaceFolder}/webapp/src/*",
    "webpack:///src/*": "${workspaceFolder}/webapp/src/*"
}

• 禁用Firefox延迟源加载：在配置中添加firefoxArgs参数，强制启用源映射：

"firefoxArgs": ["--devtools-source-map-enabled"]

• 等待编译完成再操作：启动调试后，等浏览器控制台输出Compiled successfully后再刷新页面，给源映射足够的解析时间。

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