Electron-Vue项目VS Code主/渲染进程调试配置问题求助

我之前在electron-vue项目里也碰到过几乎一模一样的调试问题，给你梳理下问题出在哪，以及正确的配置方案：

问题根源分析 #

1. 主进程"Invalid response"：你原来的配置没指定调试协议，且electron-vue编译后主进程代码在dist/electron目录，source map映射路径不对；另外启动electron时没主动开启主进程调试端口。
2. 渲染进程"connect ECONNREFUSED"：渲染进程的调试端口不是9080（那是dev-server的服务端口），需要单独指定--remote-debugging-port=9229启动参数，同时webRoot路径指向错误。

VS Code 完整调试配置 #

第一步：修改启动脚本 #

先修改项目根目录package.json里的dev脚本，添加调试端口参数：

"scripts": {
  "dev": "node .electron-vue/dev-runner.js --inspect=5858 --remote-debugging-port=9229"
}

第二步：配置.vscode/launch.json #

替换成以下完整配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Main Process",
      "type": "node",
      "request": "attach",
      "port": 5858,
      "sourceMaps": true,
      "protocol": "inspector",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "outFiles": ["${workspaceFolder}/dist/electron/**/*.js"]
    },
    {
      "name": "Attach to Renderer Process",
      "type": "chrome",
      "request": "attach",
      "port": 9229,
      "webRoot": "${workspaceFolder}/src/renderer",
      "sourceMaps": true,
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**"
      ]
    }
  ]
}

调试步骤 #

1. 运行npm run dev启动项目
2. 在VS Code的调试面板，先选择Attach to Main Process点击启动，主进程断点就能正常触发
3. 再选择Attach to Renderer Process点击启动，渲染进程的断点也能正常工作

WebStorm 调试配置 #

主进程调试配置 #

1. 点击右上角的"Edit Configurations"，新建Node.js类型的配置
2. Node interpreter：选择项目内的electron可执行文件（路径一般是node_modules/.bin/electron，Windows下是node_modules/.bin/electron.cmd）
3. Working directory：选择项目根目录
4. JavaScript file：填写.electron-vue/dev-runner.js
5. Application parameters：添加--inspect=5858
6. 勾选"JavaScript debugger"，保存配置后点击启动按钮即可调试主进程

渲染进程调试配置 #

1. 新建Chrome类型的配置
2. Remote debugging port：填写9229
3. URL：填写http://localhost:9080
4. Working directory：选择项目根目录
5. 先启动主进程的调试配置，再启动这个渲染进程配置，就能连接上渲染进程的调试器了

额外注意事项 #

• 确保Webpack配置里的source map是开启的：electron-vue默认的webpack.main.config.js和webpack.renderer.config.js里的devtool选项应该是source-map或inline-source-map，如果被修改过要改回来
• 调试时不要同时启动多个调试会话，避免端口冲突

内容的提问来源于stack exchange，提问作者Dmitry