在 VS Code 中调试 Karma 测试时未绑定断点

Question

我正在尝试使用 VS Code 调试 Karma 测试。我设法运行测试并将 VS Code 连接到无头 Chrome。问题是附加 VS Code 后断点不起作用。但是“debugger”关键字效果很好，停止后，我可以设置新的断点，它可以工作，但旧的断点仍然未绑定。

这是我的配置：

启动.json

"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "attach",
        "name": "Debug Karma",
        "address": "localhost",
        "port": 9333,
        "preLaunchTask": "Start Karma",
        "trace": true,
        "pathMapping": {
            "/": "${workspaceRoot}/",
            "/base/": "${workspaceRoot}/"
        }
    }
]

任务.json

"version": "2.0.0",
"tasks": [
    {
        "label": "Start Karma",
        "type": "npm",
        "isBackground": true,
        "script": "test-by-karma-dev",
        "problemMatcher": [
            {
                "pattern": [
                    {
                        "regexp": ".",
                        "file": 1,
                        "location": 2,
                        "message": 3
                    }
                ],
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "karma start",
                    "endsPattern": "Connected on socket"
                }
            }
        ]
    }
]

Answer 1

我正在经历完全相同的行为。您同时解决这个问题了吗？

我找到了某种其他解决方法，但它并不比放置调试器语句更好。 但是，如果您按下 karma html 页面上的调试按钮，它会打开一个新选项卡 /debug.html。之后将 vscode 附加到 chrome。然后断点保持绑定状态。但问题是那时测试已经运行了。因此，您必须刷新浏览器选项卡才能重新运行测试，但此时断点再次变为无边界。因此，您需要做的是通过重新启动 vscode 中的调试会话来刷新浏览器选项卡，并在重新启动后立即暂停它。

然后删除未绑定的断点并重新放回去。此后断点被绑定。然后恢复调试会话并命中断点。 相当多的步骤，并不比使用调试器语句更好，但也许这可以说明问题......

Answer 2

参加聚会迟到了 - 但对于那些也迟到的人...

将其添加到我的启动配置中为我解决了这个问题......

"sourceMapPathOverrides": {
    "*": "${webRoot}/*",
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
},

我按照建议添加了一条调试器语句，并将鼠标悬停在为代码文件打开的新选项卡上，并在调试器语句上中断。它显示它正在使用 webpack 位置