Vscode-remote-release: [WSL] Chrome debugger sourcemaps not working

[samdenty]

• VSCode Version: 1.34.0-insiders
• Remote Extension/Connection Type: WSL

Steps to Reproduce:

1. Launch a chrome debug configuration
2. Try and set a breakpoint on a file results in unverified breakpoint

The source-mapped path seems to be correct, as I can see by typing .scripts in the debug console:

../src/index.ts (\mnt\c\project\src\index.ts)

The slashes are incorrect they should be posix /, not sure if thats the issue or just how it's formatted

Does this issue occur when you try this locally?: No
Does this issue occur when you try this locally and all extensions are disabled?: Yes

[murzich]

@samdenty, I've also encountered the same problem.
To fix that you should run Debugger for Chrome remotely, as mentioned in Advanced: Forcing an extension to run locally / remotely.
Add into your settings.json:

"remote.extensionKind": {
  "msjsdiag.debugger-for-chrome": "workspace"
}

and install the extension to WSL from the extensions panel.
Also add runtimeExecutable into your launch.json for running Chrome after debugging starts. My launch configuration is:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome remote-WSL",
  "url": "http://localhost:3000",
  "runtimeExecutable": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",
  "webRoot": "${workspaceFolder}",
  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
  }
},

[roblourens]

Yes, using the Chrome debugger as a ui extension won't work well currently, there are some details in https://github.com/microsoft/vscode-chrome-debug/issues/832#issuecomment-491149093

[roblourens]

This should be working now

[gtbono]

Hi @roblourens I've not been able to got it working.

I was able to reproduce this bug on Windows 10 1903, using:

Ubuntu 18.04 on WSL
Remote Development extension 0.15.0
Remote WSL extension 0.38.7
Debugger for Chrome extension 4.11.6
VS Code stable 1.36.0

If I do the fix provided in this thread, of forcing the debugger for chrome extension to run remotely on WSL using:

"remote.extensionKind": {
"msjsdiag.debugger-for-chrome": "workspace"
}

And if I go into my project's launch.json for debugging and set the Chrome executable to:

"runtimeExecutable": "/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe",

Everything works, but shouldn't the fix be upstream now? I've tried to update every extension and they said that they are at their latests versions, where is the fix applied? VS Code insiders?

[roblourens]

@gtbono please open another issue and set "trace": true in your launch config, try again, and upload the log from the debug console with the issue, thanks

[murzich]

@gtbono, you already don't need to force Debugger for Chrome extension to work in the workspace. It works fine with default settings (I have the same setup with you).