2021版VS Code调试Electron仅可调试main.js其余JS文件无法调试如何解决

你当前仅配置了主进程调试规则，渲染进程相关JS文件未被调试器挂载，因此无法触发断点，按以下步骤调整即可：

1. 替换完整launch.json配置 #

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron Main",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceFolder}/main.js",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9222", "."],
      "outFiles": ["${workspaceFolder}/**/*.js"],
      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]
    },
    {
      "name": "Electron Renderer",
      "type": "pwa-chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "outFiles": ["${workspaceFolder}/**/*.js"],
      "skipFiles": ["${workspaceFolder}/node_modules/**"]
    }
  ],
  "compounds": [
    {
      "name": "Electron 全进程调试",
      "configurations": ["Electron Main", "Electron Renderer"]
    }
  ]
}

2. 适配注意事项 #

• 若项目使用Webpack、Vite等构建工具打包JS代码，需要在构建配置中开启sourcemap输出，否则断点无法和实际运行代码映射，无法触发调试。
• 调试时选择Electron 全进程调试配置启动，即可同时命中主进程、渲染进程所有JS文件的断点。
• 若部分文件断点仍未生效，可在对应文件代码开头加入debugger语句强制触发调试，验证文件是否被正常加载。

内容的提问来源于stack exchange，提问作者Staša Sekulić