跳过主内容

在 VSCode 中调试

本指南介绍了如何为自己的 Electron 项目以及原生 Electron 代码库设置 VSCode 调试。

调试您的 Electron 应用程序​

主进程​

1. 在 VSCode 中打开一个 Electron 项目。​

$ git clone [email protected]:electron/electron-quick-start.git
$ code electron-quick-start

2. 添加一个名为 .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" : ["."],
      "outputCapture": "std"
    }
  ]
}

3. 调试​

在 main.js 中设置一些断点，并在 调试视图 中开始调试。您应该能够命中断点。

这是一个预先配置的项目，您可以下载并直接在 VSCode 中调试：https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

调试 Electron 代码库​

如果您想从源代码构建 Electron 并修改原生 Electron 代码库，本节将帮助您测试您的修改。

对于那些不确定在哪里获取此代码或如何构建它的用户，Electron 的构建工具 自动执行并解释了此过程的大部分。如果您希望手动设置环境，则可以使用这些 构建说明。

Windows (C++)​

1. 在 VSCode 中打开一个 Electron 项目。​

$ git clone [email protected]:electron/electron-quick-start.git
$ code electron-quick-start

2. 添加一个名为 .vscode/launch.json 的文件，其中包含以下配置：​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(Windows) Launch",
      "type": "cppvsdbg",
      "request": "launch",
      "program": "${workspaceFolder}\\out\\your-executable-location\\electron.exe",
      "args": ["your-electron-project-path"],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [
          {"name": "ELECTRON_ENABLE_LOGGING", "value": "true"},
          {"name": "ELECTRON_ENABLE_STACK_DUMPING", "value": "true"},
          {"name": "ELECTRON_RUN_AS_NODE", "value": ""},
      ],
      "externalConsole": false,
      "sourceFileMap": {
          "o:\\": "${workspaceFolder}",
      },
    },
  ]
}

配置说明

  • cppvsdbg 需要启用 内置的 C/C++ 扩展。
  • ${workspaceFolder} 是 Chromium 的 src 目录的完整路径。
  • your-executable-location 将取决于以下几个因素
    • 测试：如果您使用的是 Electron 的构建工具 的默认设置或从 源代码构建 时使用的默认说明。
    • 发布：如果您构建的是发布版而不是测试版。
    • your-directory-name：如果您在构建过程中修改了默认值，这将是您指定的任何内容。
  • args 数组字符串 "your-electron-project-path" 应该是您用于测试的 Electron 项目的目录或 main.js 文件的绝对路径。在本例中，它应该是您对 electron-quick-start 的路径。

3. 调试​

在您选择的原生 Electron C++ 代码的 .cc 文件中设置一些断点，并在 调试视图 中开始调试。