Can't Debug in VSCode

[ScottWallace]

Just can't get the debugger to work in VSCode on this project. It never hits a single breakpoint. I've confirmed it's not an M1 and vscode-insider issue by successfully debugging a generic starter Electron app - using the exact same launch.json file below.

I've included details, and my launch.json file, any suggestions appreciated. If you want to share your own launch.json file, please do. If there's some methodology beyond the usual debugging in vscode that I'm supposed to do - start up some thing or build a certain way first - please let me know.

How about you, are you hitting breakpoints?

Machine: MacBook Air late 2020 M1 OS: Big Sur 11.2.1 VSCode: 1.54.0-insider version: 1.18.1

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Electron: Main",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": [
        "--remote-debugging-port=9223",
        "--development-mode",
        "."
      ],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 30000
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": [
        "Electron: Main",
        "Electron: Renderer"
      ]
    }
  ]
}

[PalmerAL]

I think what's going on here is that we have a separate build step that runs the various files through browserify and/or concatenates them into main.build.js and bundle.js, which is what actually gets run. Normally, you would develop min by running npm start, which does this and then launches the bundled version.

When you set breakpoints in VS code, you're most likely setting the breakpoints in a file that's not actually being executed (because the JS bundle is what's being run), which is why it wouldn't work. I don't normally use the code debugger, but I'm assuming it has some standard way of making this work in other projects that use bundlers?

(Maybe we need a sourcemap?)

[yulucodebase]

This would definitely be useful.

[wjsw1781]

i have the same problem . do you finish this? i want to debug the code

It turned out that I had misplaced the breakpoint . i should make the breakpoint on dist/***.js . then it work .

[PalmerAL]

@wjsw1781 I think we would need to change the build process for this to work correctly. However, if you find a solution for this and open a PR for it, I'd be happy to review it!