跳转至

在 VSCode 中调试

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

调试你的 Electron 应用

主进程

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

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

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 中设置一些断点，然后在调试视图中开始调试。你应该能够命中这些断点。

调试 Electron 代码库

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

如果你不确定从哪里获取这些代码或如何构建，Electron 构建工具 会自动化并说明该过程的大部分步骤。如果你希望手动设置环境，也可以使用这些构建说明。

Windows（C++）

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

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

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 会是以下之一，具体取决于若干条件：
  • Testing：如果你使用的是 Electron 构建工具 的默认设置，或者从源码构建时的默认说明。
  • Release：如果你构建的是 Release 构建，而不是 Testing 构建。
  • your-directory-name：如果你在构建过程中将其从默认值修改过，这里将是你指定的内容。
  • args 数组中的字符串 "your-electron-project-path" 应该是你用于测试的 Electron 项目的目录或 main.js 文件的绝对路径。在此示例中，它应该是你到 my-app 的路径。

3. 调试

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

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron