电子调试

我们有两个进程运行我们的应用程序——主进程和渲染器进程。

由于渲染器进程是在浏览器窗口中执行的进程，因此我们可以使用 Chrome Devtools 来调试它。要打开 DevTools，请使用快捷键“Ctrl+Shift+I”或 <F12> 键。您可以在此处查看如何使用 devtools 。

当您打开 DevTools 时，您的应用程序将如下图所示 -

开发工具

调试主进程

Electron 浏览器窗口中的 DevTools 只能调试在该窗口（即网页）中执行的 JavaScript。要调试在主进程中执行的 JavaScript，您需要使用外部调试器并使用 --debug或--debug -brk开关启动 Electron。

Electron将在指定端口监听V8调试器协议消息；外部调试器需要连接到此端口。默认端口为 5858。

使用以下命令运行您的应用程序 -

$ electron --debug = 5858 ./main.js

现在您需要一个支持 V8 调试器协议的调试器。您可以使用 VSCode 或节点检查器来实现此目的。例如，让我们按照以下步骤操作并为此目的设置 VSCode。请按照以下步骤进行设置 -

下载并安装VSCode。在 VSCode 中打开您的 Electron 项目。

使用以下配置添加文件.vscode/launch.json -

{
   "version": "1.0.0",
   "configurations": [
      {
         "name": "Debug Main Process",
         "type": "node",
         "request": "launch",
         "cwd": "${workspaceRoot}",
         "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
         "program": "${workspaceRoot}/main.js"
      }
   ]
}

注意- 对于 Windows，请使用“${workspaceRoot}/node_modules/.bin/electron.cmd”作为runtimeExecutable。

在main.js中设置一些断点，然后在调试视图中开始调试。当您到达断点时，屏幕将如下所示 -

调试器

VSCode 调试器非常强大，可以帮助您快速纠正错误。您还可以使用其他选项，例如用于调试电子应用程序的节点检查器。