Skip to main content

在 VSCode 中调试

¥Debugging in VSCode

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

¥This guide goes over how to set up VSCode debugging for both your own Electron project as well as the native Electron codebase.

调试你的 Electron 应用​

¥Debugging your Electron app

主进程​

¥Main process

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

¥ Open an Electron project in VSCode.

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. 添加具有以下配置的文件 .vscode/launch.json：​

¥ Add a file .vscode/launch.json with the following configuration:

{
  "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. 调试​

¥ Debugging

在 main.js 处设置一些断点，并在 调试视图 处开始调试。你应该能够达到断点。

¥Set some breakpoints in main.js, and start debugging in the Debug View. You should be able to hit the breakpoints.

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

¥Here is a pre-configured project that you can download and directly debug in VSCode: https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

调试 Electron 代码库​

¥Debugging the Electron codebase

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

¥If you want to build Electron from source and modify the native Electron codebase, this section will help you in testing your modifications.

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

¥For those unsure where to acquire this code or how to build it, Electron's Build Tools automates and explains most of this process. If you wish to manually set up the environment, you can instead use these build instructions.

Windows（C++）​

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

¥ Open an Electron project in VSCode.

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. 添加具有以下配置的文件 .vscode/launch.json：​

¥ Add a file .vscode/launch.json with the following configuration:

{
  "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}",
      },
    },
  ]
}

配置注意事项

¥Configuration Notes

  • cppvsdbg 需要启用 内置 C/C++ 扩展。

    ¥cppvsdbg requires the built-in C/C++ extension be enabled.

  • ${workspaceFolder} 是 Chromium src 目录的完整路径。

    ¥${workspaceFolder} is the full path to Chromium's src directory.

  • your-executable-location 将是以下之一，具体取决于几个项目：

    ¥your-executable-location will be one of the following depending on a few items:

    • Testing：如果使用 Electron 的构建工具 时的默认设置或 从源头构建 时的默认指令。

      ¥Testing: If you are using the default settings of Electron's Build-Tools or the default instructions when building from source.

    • Release：如果你构建的是发布版本而不是测试版本。

      ¥Release: If you built a Release build rather than a Testing build.

    • your-directory-name：如果你在构建过程中对默认值进行了修改，则这将是你指定的内容。

      ¥your-directory-name: If you modified this during your build process from the default, this will be whatever you specified.

  • args 数组字符串 "your-electron-project-path" 应该是你用于测试的 Electron 项目的目录或 main.js 文件的绝对路径。在此示例中，它应该是你到 electron-quick-start 的路径。

    ¥The args array string "your-electron-project-path" should be the absolute path to either the directory or main.js file of the Electron project you are using for testing. In this example, it should be your path to electron-quick-start.

3. 调试​

¥ Debugging

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

¥Set some breakpoints in the .cc files of your choosing in the native Electron C++ code, and start debugging in the Debug View.