Apply pathMapping when loading sourcemaps

[timvahlbrock]

Describe the bug
pathMapping and outFiles provide the ability to use local files for debugging and not transferring them using network protocols. However, pathMapping is not applied to the path of a source map file. sourceMapPathsOverrides does exist, but is used for files that are referenced by source maps. This results in the following issues.

1. Source maps need to be transferred using network protocols. This sucks especially, if they are large, e.g. due to inline sources.
2. Source maps need to be available in the same way the compiled source is available. In many cases they need to be served by the dev-server. This also prevents usage of source maps with apps that use file-Scheme and run on remote devices, because the remote fs cannot be mapped to the local one.

To Reproduce
Steps to reproduce the behavior:

1. Checkout https://github.com/timvahlbrock/vscode-js-debug-path-mapping and open it in VS Code.
2. Run npm ci to install dependencies
3. Run node serve to start a simple HTTP-Server, which serves the index.html, the app.js but not the source map
4. Add a breakpoint to the app.ts
5. Run Launch launch configuration, to compile and launch chrome.
6. See error "Could not read source map" in the Debug Console
7. Run command Debug: Diagnose Breakpoint Problems and select "What scripts and sourcemaps are loaded"
8. Select the app.js
9. See that path mapping for app.js was successful and it was verified on disk.

Log File

Verbose logs are written to:
[c:\Users\%user%\AppData\Roaming\Code\logs\20220419T094602\exthost13\ms-vscode.js-debug\vscode-debugadapter-eb2b356c.json.gz]()
Could not read source map for [http://localhost:8125/scripts/app.js](): Unexpected 404 response from [http://localhost:8125/scripts/app.js.map](): 
This is a test
localhost꞉8125/scripts/app.js:1
The content of this file is not really important

Full logfile will be send via e-mail.

VS Code Version: 1.66.2

Additional context
Fixing this should be fairly straightforward. Within sources.ts in addSource, the source map url needs to be converted like the url of the source file. If that proposal is accepted, I would like to provide a pull-request.

[connor4312]

The pathMapping affects how sources defined in the sourcemap get resolved. For example, a common use is mapping source URIs like webpack:///foo/bar to a location on disk.

In your example, the sourcemap for app.ts is set to return a 404. This causes breakpoints not to bind; the debugger needs a sourcemap to work with.

[timvahlbrock]

Thanks for the quick feedback. The reason why my example gives a 404, is to demonstrate, that the pathMapping is applied to the source, but not to the source map using a very basic example. The situation I ran into this is like the following.
We're running a pretty large cordova app and using https://github.com/mpotthoff/vscode-android-webview-debug (which uses this extension) to debug it. The web files on the device are served via the file-scheme (e.g. "file:///android_assets/www/app.js"). As the bundled js is pretty large, we use path mapping to map allow the debugger it to the local file, as this is much faster as loading the file back from the device every time.

...
    "pathMapping": {
        "/android_assets/www/": "${workspaceFolder}/build/"
    }
...

Even if we transfer the source map file to the device too, this extension will try to read the scheme "file:///android_assets/www/app.js.map" from "C:/android_assets/www/app.js.map". If path mapping would support source maps, the source map wouldn't need to be pushed to the device at all, and would just be loaded from the local file, right next to the file that was mapped for the source file.

The way I understood path mapping, was that it is used to map files in the browser to files on the file system. I don't quite get why this shouldn't apply to source map files too.

[connor4312]

We had this feature request before, though I cannot seem to find the issue for it, so I will reopen this. PR's welcome. Code pointers:

vscode-js-debug/src/common/sourceMaps/sourceMapFactory.ts

Line 114 in 1d734de

private async parseSourceMap(sourceMapUrl: string): Promise<RawSourceMap> {

vscode-js-debug/src/common/sourceMaps/sourceMapResolutionUtils.ts

Line 105 in 1ea758e

export const defaultPathMappingResolver: PathMappingResolver = async (

[timvahlbrock]

Great, I will try to provide a PR tomorrow

[rchiodo]

This doesn't seem to work for me. I still get the message about the source map not loading:

Verbose logs are written to:
c:\Users\aku91\AppData\Roaming\Code - Insiders\logs\20220426T154004\exthost3\ms-vscode.js-debug\vscode-debugadapter-373faac2.json.gz
Could not read source map for http://localhost:8125/scripts/app.js: Unexpected 404 response from http://localhost:8125/scripts/app.js.map: 
This is a test
localhost꞉8125/scripts/app.js:1
The content of this file is not really important
localhost꞉8125/scripts/app.js:2
[24336:21624:0426/160627.345:ERROR:simple_index_file.cc(296)] Could not create a directory to hold the index file
[24336:18516:0426/160627.357:ERROR:simple_index_file.cc(296)] Could not create a directory to hold the index file

Maybe the fix doesn't work on windows?

[connor4312]

@rchiodo can you confirm that you're on the nightly build of js-debug? https://github.com/microsoft/vscode-js-debug#nightly-extension

[timvahlbrock]

Reran this using the latest nightly release in my original reproduction repo. Worked as expected.

Maybe the fix doesn't work on windows?

I developed this feature on windows, so I can verify this definitely works there too.

[connor4312]

Closing to attempt to reverify. There's also a stable version published.

[rchiodo]

Yeah I'm on the latest I think:

Name: JavaScript Debugger (Nightly)
Id: ms-vscode.js-debug-nightly
Description: An extension for debugging Node.js programs and Chrome.
Version: 2022.4.2617
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

I do have a bunch of errors/messages for the vscode.js-debug though?

A view with id `jsBrowserBreakpoints` is already registered.
A view with id `jsExcludedCallers` is already registered.
Cannot register 'debug.javascript.codelens.npmScripts'. This property is already registered.
Cannot register 'debug.javascript.terminalOptions'. This property is already registered.
Cannot register 'debug.javascript.suggestPrettyPrinting'. This property is already registered.
Cannot register 'debug.javascript.automaticallyTunnelRemoteServer'. This property is already registered.
Cannot register 'debug.javascript.debugByLinkOptions'. This property is already registered.
Cannot register 'debug.javascript.pickAndAttachOptions'. This property is already registered.
Cannot register 'debug.javascript.autoAttachFilter'. This property is already registered.
Cannot register 'debug.javascript.autoAttachSmartPattern'. This property is already registered.
Cannot register 'debug.javascript.breakOnConditionalError'. This property is already registered.
Cannot register 'debug.javascript.unmapMissingSources'. This property is already registered.
Cannot register 'debug.javascript.defaultRuntimeExecutable'. This property is already registered.
Cannot register 'debug.javascript.resourceRequestOptions'. This property is already registered.

[rchiodo]

And I'm still getting the problem. Breakpoint doesn't bind.

[timvahlbrock]

@rchiodo The error messages you are getting show, that the nightly build fails to take effect, because the builtin version of the extension is still enabled. As described in the instructions linked above by @connor4312 , you need to disable the builtin extension, before installing the nightly build. The builtin extension can be found by searching for @builtin @id:ms-vscode.js-debug in the extensions panel.

[rchiodo]

That explains it. Didn't realize I had to disable something. Verified breakpoint is hit for me.