VSCode extension launch and debug with external source maps

[panayot-cankov]

I am developing a VSCode extension, it has a .NET process, webview frontend, extension host. It uses compound launch for debug to start a .net process (in production it is started by the vscode extension) and the VSCode extension in a new VSCode instance with debugger attached. The 3 contexts (webview, extension host and dotnet process) talk to each-other over JSON-RPC. The TS part is built using webpack with watch. A webpack config with isomorphic app and multi project typescript config outputs JS for both the extension host and the webview.

At this point I can place breakpoints in the TS for the extension host and the C#, hit F5 in VSCode and it will stop on my breakpoints. It will not stop on the TS breakpoints in the webview code though. I would prefer to use the VSCode to debug the webview and not the "open developer tools".

I am getting errors that devtools can not load the index.js.map, while executing code in the index.js, both files are there in my dist folder, here is the message:

Could not read source map for https://file+.vscode-resource.vscode-webview.net/d%3A/git/telerik/vscode-extensions/vscode-extension-blazor/dist/webview/project-wizard/index.js: Unexpected 503 response from https://file+.vscode-resource.vscode-webview.net/d%3A/git/telerik/vscode-extensions/vscode-extension-blazor/dist/webview/project-wizard/index.js.map: getaddrinfo ENOTFOUND file+.vscode-resource.vscode-webview.net

I can switch to inline sourcemaps, and then the big blob with the mapping is attached to the end of the javascript file, and then it happily works, but the .js file grows considerably.

I've found this in stack-overflow: https://stackoverflow.com/questions/51266222/webpack-devtool-source-map-vs-eval-source-map
But I guess the solution to use eval-source-map is just inlining the source maps.

[alexr00]

@connor4312 what is the best way to verify this?

[panayot-cankov]

Is it available in the developer insiders? I would love to switch my webpack build back to external source maps and give it a go.

If you need this I could help with a small repro, but basically you have to create a webview extension for VSCode, set the "<base" path in the HTML to point to the extension dir. Add typescript project that would generate external source maps. Add index.ts that would output index.js and index.js.map nearby. From the HTML include the index script like <scripts src="index.js"... The "base" will provide the leading "vscode-file://someguid/tomyextension/index.js", then in the HTML add a button that triggers calls a function from the index.ts, add a breakpoint somewhere there. Launch the extension. If it is fixed, the index.js will have a single line at the end pointing to the source map in the index.js.map, and the index.js.map should point to the source file index.ts. The dev tools should load the index.js.map and the index.ts, and should report properly console.log sources in the ts file and should let you put breakpoints in the .ts files and stop on them when you are clicking on the html buttons.

[connor4312]

@alexr00 probably the easiest way is to yo code a new Notebook Renderer and verify that you can set breakpoints in the client-side renderer code.

[tanhakabir]

@connor4312 I'm seeing it hang on launching the extension host in the generated renderer but not other workspaces. Removing the debugWebviews and trace options didn't fix it. (I thought it would since they seem unique to the extension)

[connor4312]

@tanhakabir I'm not able to reproduce that, and it seems like a separate issue altogether

[tanhakabir]

Leaving the issue for someone else to verify since I can't seem to launch extension host

[connor4312]

Please check for console errors, grab trace logs, and open an issue for that :)