Electron-Vue之支持主进程调试

使用Vue开发Electron程序时，如果不能调试，只用log，会非常痛苦。
具体配置，可以参照Vue CLI Plugin Electron Builder中的Debugging With VSCode。

1. Enable Sourcemaps

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

2. Add Debug Task

Add the electron-debug task to .vscode/tasks.json, which will start the Electron dev server in debug mode:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "electron-debug",
      "type": "process",
      "command": "./node_modules/.bin/vue-cli-service",
      "windows": {
        "command": "./node_modules/.bin/vue-cli-service.cmd"
      },
      "isBackground": true,
      "args": ["electron:serve", "--debug"],
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": ""
        },
        "background": {
          "beginsPattern": "Starting development server\\.\\.\\.",
          "endsPattern": "Not launching electron as debug argument was passed\\."
        }
      }
    }
  ]
}

3. Add Debugging Configurations
   Add Electron: Main, Electron: Renderer, and Electron: All debug configurations to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "runtimeExecutable": "${workspaceRoot}/node_modules/electron/dist/electron.exe", 
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/electron/dist/electron.exe"
      },
      "preLaunchTask": "electron-debug",
      "args": ["--remote-debugging-port=9223", "./dist_electron"],
      "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "urlFilter": "http://localhost:*",
      "timeout": 30000,
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

runtimeExecutable": “${workspaceRoot}/node_modules/electron/dist/electron.exe”,
这里根据Electron的实际位置进行了调整。

4. VsCode调试界面，增加node.js配置文件，会自动生成laungh.json文件，将上述的laungh.json文件内容，覆盖默认生成的即可。然后选中Electron：All方式，按F5进行调试。

注意事项：
调试时，如果在Debug界面-BreakPoints栏，选中AllExceptions和UncaughtExceptions时，会导致异常。
这个问题，有可能通过修改skipFiles or smartStep配置能解决，目前还未进行尝试。