Breakpoints unbound, VSCode cannot find source maps

[esnyder1]

I am unable to get breakpoints working in VSCode when debugging a typescript, angular application. When I look at Debug Diagnostics, it does not find any source location, even though "sourceMap": true is set in the tsconfig.

tsconfig.json

launch.json

Errors in Debug Console:

Sources tab in Chrome Dev Tools:

If I set the breakpoint in Chrome Dev Tools or use the debugger statement in the typescript file, I am able to hit the breakpoint without an issue. How do I get the breakpoints to bind in the VSCode debugger?

[connor4312]

If you're able to, add "trace": true to your launch.json and reproduce the issue. The location of the log file on your disk will be written to the Debug Console. Share that with us.

⚠️ This log file will not contain source code, but will contain file paths. You can drop it into https://microsoft.github.io/vscode-pwa-analyzer/index.html to see what it contains. If you'd rather not share the log publicly, you can email it to connor@xbox.com

[esnyder1]

I just sent an email with the log files.

[connor4312]

This doesn't seem to be an issue in the debugger. You have scripts like "https://localhost:3000/v2/main.js", which has a source map URL "main.js.map". But when the debugger requests https://localhost:3000/v2/main.js.map, it gets HTML instead of the expected JSON source map.

You may want to check that you don't have any other processes listening on port 3000 (e.g. one on ipv4 loopback and one on ipv6 loopback) as the debugger can try both depending on your local network configuration and it may not hit the desired one.

[esnyder1]

When I query processes listening on port 3000, I only see one process. I also tried updating launch.json to use 127.0.0.1 and '[::1]`, but both have the same problem.

If I change the launch.json to point to the dist directory, I am able to hit breakpoints in a TS file, but it is a separate copy of the typescript file located in publicV2\dist\public-v2\src\app\module\ directory.

Versus

[connor4312]

Interesting, do you mind grabbing a log of that case so I can see what the difference is?

[esnyder1]

Sure, just emailed you the log file.

[esnyder1]

@connor4312 were you able to find anything in the log files that would help identify where the issue is occurring?

[connor4312]

I think that it only works because as a fallback we try to load the source from disk after appling path mappings (this is mostly used for Node.js) and when you change your webRoot is makes the config line up so that that fallback works. But this is more happenstance for your case, and it doesn't fully work. I would recommend continuing to investigate what sever is returning the HTML for your sourcemap URLs in the first place.

[esnyder1]

@connor4312 do you have any suggestions on how to debug the sourcemap requests VSCode is making?

I tried comparing with Chrome DevTools, but source maps load correctly in devtools and it appears to be making the same requests. If I open the link provided in the VS Code debug console (IE: https://localhost:3000/v2/main.js) I get the exepcted file with with //# sourceMappingURL at the bottom. If I then navigate to the .js.map file listed in the comment, I see the JSON source map contents as expected. I am able to do this using either 127.0.0.1 or [0:0:0:0:0:0:0:1] instead of localhost. Since Chrome DevTools is also able to get the source maps successfully, I can't figure out what VSCode is requesting that is causing it to get back HTML instead. Could this be related to authentication/redirects?

DevTools

VS Code

[esnyder1]

I confirmed that if I use curl to make the request to https://localhost:3000/v2/main.js.map, I get a 403 Forbidden/ERR_ACCESS_DENIED. However, the browser is able to authenticate and successfully load the source maps.

I found this issue regarding source maps and authentication (microsoft/vscode#192895) which made me think if the browser authenticates then VSCode should be able to use the browser stack to get the sourcemaps. It looks like that change was made in 1.82 and I am using version 1.87.0.

Are there any settings required to let VSCode know to use the browser's network stack or a way to force that?

[esnyder1]

@connor4312 any suggestions on how to confirm that it is an issue with authentication and how to get VSCode to be able to access the source maps that the browser is able to load?

[lights-a5]

I was also running into a similar issue and I found a workaround. I was using webpack and then forcing it to use inline source maps helped make it work. By making the source maps inline, the debugger didn't need to make additional requests for the source maps. However, this didn't end up being a viable long term solution for me as the files are massive. For now, I'm having to set breakpoints in the browser debugger.

I am rather certain that the source map that vscode was getting back was an SSO login page. I was getting the exact error of Unexpected token '<', "<!DOCTYPE "... is not valid JSON.

[esnyder1]

Yes, I came to the same conclusion that it is due to the SSO login page. But there isn't any way to get around hitting the SSO and I wasn't able to get inline source maps to work. Unfortunately, without this working I am also stuck using the browser debugger.

@connor4312 is it a known issue that Source Map Request Authentication does not work with SSO? Is this something that can be added?