Windows系统下Visual Studio Code调试Electron React Boilerplate主进程失败求助

开发者阿泽

2026-4-13

兄弟我太懂这种抓心挠肝的感觉了！我之前用electron-react-boilerplate的时候也踩过一模一样的主进程调试坑——断点打了跟摆设似的，VSCode还一个劲提示找不到sourceMap，差点没把我逼疯😅 给你分享几个亲测有效的解决办法，都是我踩坑踩出来的：

先把launch.json配置改对（Windows专属坑要注意）
你之前的launch.json没写完，我给你一个Windows环境下亲测能跑的主进程调试配置，直接替换或者补充到你的configurations里：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": ["./dist/main/main.js"],
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/main/**/*.js"],
      "protocol": "inspector"
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}/src/renderer",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/renderer/**/*.js"]
    }
  ]
}

重点注意Windows下的runtimeExecutable是electron.cmd，很多人直接写electron会找不到执行文件，这是Windows特有的坑！

确认主进程的WebPack配置开了正确的sourceMap
打开项目里主进程的WebPack配置文件（一般叫webpack.config.main.js，在internals或者configs目录下），必须确保有生成完整sourceMap的配置，不能用eval类的快速编译选项，比如：
```
module.exports = {
  // 其他配置...
  devtool: 'source-map', // 或者'cheap-module-source-map'，这俩都能生成VSCode能识别的sourceMap
  // 其他配置...
}
```
要是WebPack没生成正确的sourceMap，VSCode根本没法把编译后的js和你的源码对应起来，断点自然无效。
调试前必须先编译主进程代码
别直接点调试！先在终端执行npm run build:main（或者你项目里对应的主进程编译命令），把src/main下的代码编译到dist/main目录里，因为launch.json里指定的是编译后的主进程文件，没编译的话Electron都找不到主进程，更别说调试了。
最后试试清理缓存救急
要是上面的步骤都试了还是不行，那就删了node_modules/.cache和dist目录，重新跑npm install和npm run build:main，有时候旧的缓存文件会导致sourceMap和源码不匹配，清完缓存大概率能好。

备注：内容来源于stack exchange，提问作者Girolamo Pisano