Skip to main content

Debugging in VSCode在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项目以及本地Electron代码库设置VSCode调试。

Debugging your Electron app调试Electron应用程序​

Main process​

1. Open an Electron project in VSCode.在VSCode中打开Electron项目。​

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

2. Add a file .vscode/launch.json with the following configuration:使用以下配置添加文件.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. Debugging​

Set some breakpoints in main.js, and start debugging in the Debug View. 在main.js中设置一些断点，并在调试视图中开始调试。You should be able to hit the breakpoints.您应该能够命中断点。

Here is a pre-configured project that you can download and directly debug in VSCode: 以下是一个预配置的项目，您可以下载并直接在VSCode中调试：https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

Debugging the Electron codebase调试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并修改本地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. 对于那些不确定从何处获取代码或如何构建代码的人，Electron的构建工具会自动完成并解释大部分过程。If you wish to manually set up the environment, you can instead use these build instructions.如果希望手动设置环境，可以使用这些构建说明。

Windows (C++)​

1. Open an Electron project in VSCode.在VSCode中打开Electron项目。​

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

2. Add a file .vscode/launch.json with the following configuration:使用以下配置添加文件.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}",
      },
    },
  ]
}

Configuration Notes配置说明

  • cppvsdbg requires the built-in C/C++ extension be enabled.cppvsdbg要求启用内置的C/C++扩展。
  • ${workspaceFolder} is the full path to Chromium's src directory.是Chromium的src目录的完整路径。
  • your-executable-location will be one of the following depending on a few items:将是以下之一，具体取决于几个项目：
    • Testing: If you are using the default settings of Electron's Build-Tools or the default instructions when building from source.：如果您正在使用Electron的构建工具的默认设置或从源代码构建时的默认说明。
    • Release: If you built a Release build rather than a Testing build.：如果您构建的是发布版本，而不是测试版本。
    • your-directory-name: If you modified this during your build process from the default, this will be whatever you specified.：如果您在构建过程中从默认值修改了此项，则这将是您指定的任何内容。
  • 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. args数组字符串"your-electron-project-path"应该是您用于测试的Electron项目的目录或main.js文件的绝对路径。In this example, it should be your path to electron-quick-start.在这个例子中，它应该是electron-quick-start。

3. Debugging调试​

Set some breakpoints in the .cc files of your choosing in the native Electron C++ code, and start debugging in the Debug View.在本地Electron C++代码中选择的cc文件中设置一些断点，然后在调试视图中开始调试。