Unbound breaking points with pwa-chrome with Electron & Typescript

[jvallesf]

Hello,

I am doing the transition to the new VSCode debugger for an Electron app and I can't sort out how to configure launch.json to hit breakpoints on .tsx files with pwa-chrome. I have the following versions:

• Electron 5.0.13
• Node.js 12.6.0
• VSCode 1.60.0 (Windows)

If I set a breakpoint on a .tsx file it is hit on the compiled .js file. The output of the debugger is full of messages like:
Could not read source map for c:\Users\jvall\Indeep_projects\onevision-electron\app\src\core\components\gui\src\guiService\components\dataset\react\dataset-explorer.js: Unexpected token ; in JSON at position 12. The .js.map and .js files are generated on the same directory of the .ts source. It seems from the message that it finds the source map but cannot parse it.

I would appreciate it if you could have a look and give me some ideas of what could be wrong, because I am a bit stuck right now.

Attached the trace file of the debugger and example .js and .js.map files.
files.zip

This is the configuration of the debugger for the main process (working fine) and for the renderer to attach to the Chrome process (not working). I have tried many different parameters but without success.

{
            "name": "main",
            "type": "pwa-node",
            "request": "launch",
            "sourceMaps": true,
            "program": "${workspaceFolder}/app/src/core/app-core.ts",
            "cwd": "${workspaceRoot}",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
            "args": [
                "--dev",
                "--inspect=9339",
                "--remote-debugging-port=9223"
            ],
            "port": 9339,
            "timeout": 5000,
            "console": "integratedTerminal"
},
{
            "name": "renderer-new",
            "type": "pwa-chrome",
            "request": "attach",
            "port": 9223,
            "timeout": 20000,
            "webRoot": "${workspaceFolder}",
}

[connor4312]

It looks like you're on a pretty old Electron version (5). It's reporting URLs when scripts get parsed as file path instead of proper file URIs, which causes completeUrl here to fail and return undefined:

vscode-js-debug/src/adapter/threads.ts

Line 1145 in 10f3936

: (event.url && urlUtils.completeUrl(event.url, event.sourceMapURL)) || event.url;

Therefore we just fall back to the script URL--which is pretty naive, we should not have a fallback and just return undefined. to let it warn.

[jvallesf]

Hello Connor,

Just to make sure I understood. The bug is that the message "Could not read source map for..." should be "Could not load source map from...", right? So, there is no way to make the new debugger work with this version of Electron? If I want to work with the new debugger I must update Electron or switch to the legacy debugger, right?

Thank you!

[TylerLeonhardt]

@jvallesf can you try out the latest insider build of VS Code: http://code.visualstudio.com/insiders if the issue is fixed there, can you please respond with /verified so we can mark this issue as verified to be fixed?

[jvallesf]

/verified