I have seen and read plenty of similar questions and their respective answers, tutorials, and the documentation. However, none helped me solve my problem.
I have an Aurelia application with Typescript and Webpack. I run my tests with Karma which works just fine (including --watch). Now I'd like to debug my tests in VSCode. The Chrome Debug Extension is installed and in principle it works: I can insert debugger; statements so that the debugger breaks at that point.
Breakpoints, however, don't get hit. I tried both with and without source maps. My launch config looks like this:
{
"type": "chrome",
"request": "attach",
"name": "attach to karma's chrome",
"port": 9333,
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"pathMapping": {
"/": "${workspaceRoot}/",
"/base/": "${workspaceRoot}/"
},
"sourceMapPathOverrides": {
//"webpack:///./*": "${webRoot}/*",
//"webpack:///src/*": "${webRoot}/*",
//"webpack:///*": "*",
//"webpack:///./~/*": "${webRoot}/node_modules/*"
"webpack:///myproject/./*": "${webRoot}/*",
"webpack:///myproject/src/*": "${webRoot}/*",
"webpack:///myproject/*": "*",
"webpack:///myproject/./~/*": "${webRoot}/node_modules/*"
},
"trace": "verbose"
}
The webRoot looks good to me, it's the base folder of what I can find in the source map. The sourceMapPathOverrides might look strange. The reason is that in the source map I find paths like webpack://myproject/./test/unit/type-transformer/base.spec.ts. I also tried the configuration that is commented and also without any overrides at all.
The logs say something like:
From client: setBreakpoints({"source":{"name":"base.spec.ts","path":"/path/to/myproject/test/unit/type-transformer/base.spec.ts"},"lines":[13],"breakpoints":[{"line":13}],"sourceModified":false})
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"Versions.DebugAdapterCore":"6.6.0","Versions.DebugAdapter":"4.8.0","fileExt":".ts"}}}
To client: {"seq":0,"type":"response","request_seq":3,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"verified":false,"line":13,"message":"The breakpoint will be ignored, because the generated code cannot be found (path mapping problem?).","id":1000}]}}
(The message is in German for me so it might not exactly match the original English message.) What I find strange is that the path on the filesystem gets sent to chrome (as path). No idea how it should resolve that to the correct entry in the source map.
How can I configure the debugger so that breakpoints work?
