Map local folder to URL

[llgcode]

If I check sourceMap spec, it specify where we found URL source
...
sources – An array of URLs for the original source files.
sourceRoot – (optional) The URL which all of the files in the sources array will be resolved from.
...

I haven't found a way to map sources url to source local path like this (like in chrome when we simply map a local folder to network resource...)

• "${workspaceRoot}/project1/src/" -> ["http://localhost:8080/myapp/project1/", "https://my_remote_website_in_production/myapp/project1/*"]
• "${workspaceRoot}/project2/src/" -> ["http://localhost:8080/myapp/project2/", "https://my_remote_website_in_production/myapp/project2/*"]

sourceMapPathOverrides don't allow this kind of config and this is not a shared config over launchers.

[roblourens]

This is what the 'webRoot' property is for, it's the local path of the URL hostname. Note that you can check how paths have been resolved with the .scripts command in the console.

[llgcode]

so is it possible to map local files to URL like this?
"${workspaceRoot}/project1/src/" -> ["http://localhost:8080/myapp/project1/", "https://my_remote_website_in_production/myapp/project1/"]
"${workspaceRoot}/project2/src/" -> ["http://localhost:8080/myapp/project2/", "https://my_remote_website_in_production/myapp/project2/"]

And it works only if you use sourceMapping. It doesn't work with simple js.

[roblourens]

Actually right, since the paths are different in project1/src and myapp/project1, I don't have a way to do that mapping now. I have an issue to think about that, #72, but it seems that usually this extension is most useful in a simpler dev setup, and I haven't had many people ask for it.

[llgcode]

Is it possible to dev and open a pull request? Where's the code related to source path mapping?

[roblourens]

Definitely, the relevant code for mapping paths without sourcemaps or before sourcemaps are applied would be around here - https://github.com/Microsoft/vscode-chrome-debug-core/blob/master/src/transformers/urlPathTransformer.ts#L63

That function is called when a new script is loaded, and returns the local path of the script (if it exists locally)

[llgcode]

@roblourens not sure if I need to open an issue for this but when I want to build (gulp build or gulp watch). I have this (strange) error:

E:\git\vscode-chrome-debug-core\node_modules\chrome-remote-debug-protocol\lib\main.js:37
exports.downloadAndGenerate = (destFilePath, version = 'master', type = 'all') => __awaiter(this, void 0, void 0, function* () {
                                                     ^

SyntaxError: Unexpected token =
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (E:\git\vscode-chrome-debug-core\gulpfile.js:17:14)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

I've done the same with vscode-chrome-debug extension (npm run build) and it seems to work fine.

ps:
I previously made a npm update -g && npm install

[roblourens]

Your node version probably isn't recent enough, since it doesn't like that library's ES2015 syntax. Can you use 6.x for running npm install? You should be able to switch back after that if needed.

[auchenberg]

Hi @llgcode

Thanks for opening the issue and for the PR!

I'm having a hard time understanding the specific use case that requires this new path mapping capability? Are you trying to debug two different websites/apps that lives inside he same code-base?

It should be the responsibility of your build tool to generate sourcemaps that has the correct paths for any given resource. Our sourceMapPathOverrides config is in place to enable overrinding of badly generated sourcemaps.

[llgcode]

Hi @auchenberg,
My workspace is organized with different projects with src folder. In dev mode I don't "publish"/ serve file from the resulting compilation (final) folder but from sources where there's javascript. So even without source mapping(sometimes I use source mapping) I need to locate source files. so this is my need, and I'm sure I'm not the only one in that case. The interesting thing about this PR #147 is that you can locate locally source files that are served by another server too, that I'm sure people will be happy with that (in some case debug production server with proxies and cdn and complex packaging!):

...
pathMapping: {
"https://myproductionserver/app": "/local/folder/app/js",
"https://myproductioncdn/libs": "/local/folder/libs/js"
}
...

with this you don't need to override source map with sourceMapPathOverrides. Source map is for url (see sources and sourceRoot) that is used by your browser, path mapping is here just to map local path to url and vscode uses local path not url so we need a mapping between both world.

[roblourens]

Right, this is relevant when there are no sourcemaps, or sourcemaps are only available locally.