VS Code sourceMapPathOverrides

Question

I have an Aurelia TypeScript project where my compiled JavaScript files go into the .../wwwroot subfolder and the original typescript files are located in .../src. I am trying to use the Chrome Debugger extension in VS code but breakpoints are not hit and when I turn on diagnosticLogging in launch.json the the mapped source is incorrect: It look in .../wwwroot/src/file.ts instead of .../src/file.ts.

I tried to solve this with sourceMapPathOverrides but with no success. It seems I cannot match my sourceRoot.

I tried this:

"webRoot": "${workspaceRoot}/wwwroot",
"sourceMapPathOverrides": {
    "/src/*": "${workspaceRoot}/src/*"     
},

This is the debug console output for finding the source to login.js:

›SourceMaps.loadSourceMapContents: Reading local sourcemap file from ...\wwwroot\dist\login.js.map
›SourceMap: creating for ...\wwwroot\dist\login.js
›SourceMap: sourceRoot: /src
›SourceMap: sources: ["login.ts"]
›SourceMap: webRoot: .../wwwroot
›SourceMap: resolved sourceRoot /src -> ...\wwwroot\src
›SourceMaps.scriptParsed: ...\wwwroot\dist\login.js was just loaded and has mapped sources: ["...\\wwwroot\\src\\login.ts"]

Note: The three dots ... stand for my removed path on disk to the project root.

How can I use sourceMapPathOverrides to have it lookup login.ts in .../src/?

---

Because of suggestion I tried to set webRoot to the workspaceRoot like this:

"webRoot": "${workspaceRoot}"

This way the mapped source file is correct and breakpoints work. But the log also says:

Paths.scriptParsed: could not resolve http://localhost:9000/dist/login.js to a file under webRoot: c:\Users\username\Source\Repos\myproject. It may be external or served directly from the server's memory (and that's OK).

The folder served by the webserver is the wwwroot subfolder in my project so from the description setting webRoot to workspaceRoot is wrong. What other problems might occur or is the suggestion of @Steffen valid?

To make sure, this is the folder structure

/                    (project/source/git root)
/src                 (contains typescript, html files, is sourceRoot in source mapping)
/src/login.ts
/wwwroot             (root folder served by dev web server, should be webRoot shouldn't it?)
/wwwroot/index.html  (file opened by http://localhost:9000/ which starts Aurelia bootstrapper)
/wwwroot/config.js   (SystemJS config, maps * to dist/* )
/wwwroot/dist        (folder containing compiled application files)
/wwwroot/dist/login.js

Wrap

Have you tried "webRoot": "${workspaceRoot}" in launch.json? I'm not sure if I got your directory structure right but it should resolve your sourcemaps to ${workspaceRoot}/src/login.ts – Shanon

Hm, that way it finds the correct source map and breakpoints in VS code work. But I am not sure if other things will break. Will update the question with some of my finding, just a moment... – Wrap

you're right, wwwroot should be the correct webroot of your application. but in this case /src as root of your source files is wrong. it should be ../src (relative to wwwroot). maybe you can give more details about how your source maps are generated? if you can't control the sourcemap paths, setting "sourceMapPathOverrides": { "${workspaceRoot}/wwwroot/src/*": "${workspaceRoot}/src/*" } should work. – Shanon

@Shanon I gently disagree, the sourceRoot is not wrong but has to be mapped according to how I host the files in different environemnt. I think that is one of the use cases of sourceMapPathOverrides. I filed an issue github.com/Microsoft/vscode-chrome-debug-core/issues/… and it looks like it works when a trailing slash is injected into sourceRoot in the source maps. Will do that until it is fixed. – Wrap

Answer 1

This worked for me in VSCode's launch.json

{
... // other bits

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

... // other bits
}

Enticement