Electron 主进程调试

Posted 2023-03-20

参考技术A Electron 浏览器窗口的开发工具 devtools 只能调试在该窗口中执行的 javascript （比如 web 页面）。要调试在主进程中执行的 JavaScript ，我们需要使用外部调试器。 Electron 提供了 --inspect 和 --inspect-brk 开关来实现这一操作。

我们可以使用如下的命令行开关来调试 Electron 的主进程。

在根目录下添加一个 .vscode/launch.json 文件并使用以下配置：

然后在 VSCode 中找到如下所示图标，点击右上角的设置，会打开新建的 launch.json 文件，如下图：

然后点击左上角的绿色三角形按钮：

接着在 main.js 主进程中进行断点调试即可：

与 Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试

【中文标题】与 Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试

【英文标题】：VSCode debugging of Node or Electron Main Process bundled with Webpack

【发布时间】：2017-06-17 08:21:58

【问题描述】：

我的 Electron 主进程是用 TypeScript 和捆绑的 Webpack 2 编写的。

转译是通过ts-loader 和babel-loader 完成的。

开发模式以webpack --watch 开头，main process configuration。

问题

我无法使用 VSCode 调试器调试主进程。

在入口点src/main/index.ts添加断点没有任何作用。

配置

.vscode/launch.js

  "configurations": [
    
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "$workspaceRoot",
      "runtimeExecutable": "$workspaceRoot/node_modules/.bin/electron",
      "runtimeArgs": [
        "$workspaceRoot",
        "--remote-debugging-port=9222"
      ],
      "sourceMaps": true
    
  ]

webpack.development.js

  target: 'electron',
  devtool: 'source-map',

  entry: 
    main: join(__dirname, 'src/main/index')
  ,

  output: 
    path: join(__dirname, 'app'),
    filename: '[name].js'
  

【参考方案1】：

VSCode 配置

重要的是把源文件作为程序的入口点给VSCode，并在"program"键中指定。

你还需要在"outFiles"中指定Webpack生成的bundle。

  "configurations": [
    
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "$workspaceRoot",
      "runtimeExecutable": "$workspaceRoot/node_modules/.bin/electron",

      // This is the important stuff
      "program": "$workspaceRoot/src/main/index.ts"
      "outFiles": [
        "$workspaceRoot/app/main.js"
      ],
      "sourceMaps": true
    
  ]

Webpack 配置

在您的 Webpack 配置中，您需要指定要在源映射中写入模块源文件的完整路径。

  output: 
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'
  

还要小心选择未评估的源映射，以允许 VSCode 静态找到相应的入口点。

小例子

我用最少的配置和更多的解释创建了a repo。

【讨论】：

我不得不使用"program": "$workspaceRoot/dist/main.js" 而不是打字稿文件。此外，端口不同：electron ./dist --serve --debug=3068

【参考方案2】：

我不知道这是否可能，但--remote-debugging-port=9222 用于 v8-inspector 协议，Electron Node 尚不支持 (https://github.com/electron/electron/issues/6634)。

由于这是一个启动配置，VS Code 会将--debug=5858 传递给运行时，因此您无需在此处指定端口。也许尝试添加--nolazy。希望对您有所帮助。

【讨论】：

刚刚发现如何实现这一点。事实上，我认为--no-lazy 标志是默认通过的。但你对调试端口是正确的。