概要

📑在这份文档中, 我们将了解如何在 Visual Studio Code 中调试 Electron 应用程序。这个过程将帮助开发者在开发过程中更容易地发现和解决问题。

事实

• 📝 安装 Visual Studio Code: 首先, 你需要安装 Visual Studio Code, 以及相应的扩展, 如 “Debugger for Electron”。
• 🚀 创建调试配置: 在项目根目录下创建一个 .vscode 文件夹, 并在其中创建一个 launch.json 文件, 配置调试选项。
• 🐛 启动调试会话: 打开 Electron 项目, 然后按下 F5 键或通过 VS Code 菜单启动调试会话。
• 🧐 断点和监视: 在代码中设置断点, 以便在特定位置停止执行, 并使用监视功能来查看变量和表达式的值。
• 📚 使用开发者工具: 在 Electron 应用程序中打开开发者工具, 以便查看渲染进程中的错误和日志信息。
• 🔄 重新加载应用程序: 在调试会话期间, 你可以通过使用 Ctrl+R 或 Cmd+R 来重新加载你的 Electron 应用程序。
• 🛠 解决问题: 通过上述步骤, 你可以更轻松地诊断和解决 Electron 应用程序中的问题, 提高开发效率。

内容

准备

C:\Users\admin\Desktop>node -v
v18.17.1

C:\Users\admin\Desktop>npm -v
9.6.7

仓库

下载

C:\Users\admin\Desktop>git clone git@github.com:electron/electron-quick-start.git

我们会得到一个官方仓库, 里面配置好了基本的代码

打开

code electron-quick-start

创建

添加文件 .vscode/launch.json, 内容为(#):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."]
    }
  ]
}

依赖

这里我们需要先运行两条命令, 将 Electron 框架作为开发依赖项安装到您的项目中, 以便在开发过程中使用 Electron 构建桌面应用程序。

C:\Users\admin\Desktop\electron-quick-start>npm install electron --save-dev
...

C:\Users\admin\Desktop\electron-quick-start>npm audit fix
...

成功

参考

[1] Electron, “Debugging in Visual Studio Code,” [Online]. Available: https://www.electronjs.org/zh/docs/latest/tutorial/debugging-vscode. [Accessed: November 14, 2023].