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 项目。​

🌐 1. Open an Electron project in VSCode.

$ npx create-electron-app@latest my-app
$ code my-app

2. 添加一个名为 .vscode/launch.json 的文件，并使用以下配置：​

🌐 2. 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. 调试​

🌐 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.

调试 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++）​

🌐 Windows (C++)

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

🌐 1. Open an Electron project in VSCode.

$ npx create-electron-app@latest my-app
$ code my-app

2. 添加一个名为 .vscode/launch.json 的文件，并使用以下配置：​

🌐 2. 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}",
      },
    },
  ]
}

配置说明

  • cppvsdbg 需要启用 内置 C/C++ 扩展。
  • ${workspaceFolder} 是 Chromium 的 src 目录的完整路径。
  • your-executable-location 将根据几个项目而有所不同，可能是以下之一：
    • Testing：如果你使用的是 Electron 的构建工具 的默认设置，或在 从源码构建 时使用默认说明。
    • Release：如果你构建的是发布版本而不是测试版本。
    • your-directory-name：如果你在构建进程中修改了默认设置，那么这里将显示你所指定的内容。
  • args 数组字符串 "your-electron-project-path" 应该是你用来进行测试的 Electron 项目目录或 main.js 文件的绝对路径。在这个例子中，它应该是你到 my-app 的路径。

3. 调试​

🌐 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.