sourceMapPathOverrides matching doesn't work when sourceRoot does not end in /

[ZoolWay]

According to the readme sourceMapPathOverrides matches sourceRoot plus sources.
I got a login.js.map for a login.ts which has sourceRoot: '/src' and sources: ['login.ts']. So the source-file should be /src/login.ts.

But the following entry for sourceMapPathOverrides is not used:
"/src/*": "${workspaceRoot}/src/*"

Note: Workspace root src is not a subfolder of webRoot.

[roblourens]

That looks correct to me. Have you looked at the logs from the diagnosticLogging option? If not, can you set that and check whether it comes up? If you upload the log file from ~/.vscode/extensions/msjsdiag.debugger-for-chrome/vscode-chrome-debug.txt, I can take a look.

[ZoolWay]

Yes, I have already activated diagnosticLogging and tried some variations.

You can see the vscode-chrome-debug.txt here:
https://gist.github.com/ZoolWay/59bc007f3afcd044bc63f3b3bb52561a

I try to focus on login.ts for now as it is the simplest one.

Most interesting should be lines 635 - 643.
The correct and existing mapped source which is opened in VS code would be:
c:\\Users\\username\\Source\\Repos\\my-project\\src\\login.ts

[ZoolWay]

Additional note:

My dev web server root is /wwwroot, so I got webRoot like this:
"webRoot": "${workspaceRoot}/wwwroot"

When setting it like this the source map to looked up correctly:
"webRoot": "${workspaceRoot}"

But according to documentation webRoot is not used for sourceMapPathOverrides and also it fails to find the compiled javascript source files:

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).

[roblourens]

I think your sourceRoot should be /src/, not /src. Is it being generated by some tool, or did you manually specify it? I'm not sure whether I need to handle that case or if it's invalid.

[ZoolWay]

You mean sourceRoot inside of the .js.map files? I use gulp-sourcemaps to load the sourcemaps of the typescript compiler and process them. The sourceRoot parameter on sourcemaps.write is set to /src.

I have tried /src/ instead and checked the .js.map file. The override seems to match now:

›SourceMap: mapping /src/login.ts => c:\Users\username\Source\Repos\my-project\src\login.ts, via sourceMapPathOverrides entry - "/src/": "c:\Users\username\Source\Repos\my-project/src/"

The breakpoint works. This way I can leave the webRoot setting to the correct one so that HTML and CSS files will be matched again too. The original one:
"webRoot": "${workspaceRoot}/wwwroot"

But I am curious, why did it not match with one slash less? There was nothing like /srclogin in the logs to indicate I am missing a slash. Also all the sourcemap samples I have seem yet have no trailing slash for the parameter.

[roblourens]

I'm basically doing path.join(sourceRoot, source) in one place, and sourceRoot + source in another place. I'm not sure which is right - can you point me towards these samples that show it without a trailing slash?

path.join is probably the way to go, I guess. Does it work in Chrome?

[ZoolWay]

I would also think path.join is the way to go as it should handle directory separation correctly in almost all cases.

I got my sample from the Aurelia skeleton but if you take a short look at the gulp-sourcemaps documentation at sourceRoot none of the examples mention a trailing slash.

I will continue to work with the trailing slash injected into my source maps' sourceRoot until this is fixed.

[georgiosd]

Having hell of a time matching typescript maps in an electron app.

I got "sourceRoot": "/src/" in my tsconfig.json and

"webRoot": "${workspaceRoot}/dist",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "/src/": "${workspaceRoot}/src/"
            },

in my launch.json but the breakpoints keep getting ignored.

I tried adding a wildcard on either side of the override with the same results.

Any ideas?

EDIT: just in case it's not clear, src dir is workspaceRoot/src and outputs to workspaceRoot/dist

[georgiosd]

This looks related: https://github.com/Microsoft/vscode-chrome-debug/issues/85

App loads from a file://url but source maps are loaded from the browser (electron)

[roblourens]

You would likely need

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

Use the .scripts command to check the result

[georgiosd]

Thanks for the tip, .scripts did it.

I needed sourceRoot: '/' and

"sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            }