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

  1. Enable Sourcemaps
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
  1. 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\\."
        }
      }
    }
  ]
}
  1. 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的实际位置进行了调整。

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

注意事项:
调试时,如果在Debug界面-BreakPoints栏,选中AllExceptions和UncaughtExceptions时,会导致异常。找不到某些库文件的错误
这个问题,有可能通过修改skipFiles or smartStep配置能解决,目前还未进行尝试。

Logo

前往低代码交流专区

更多推荐