跳到主要内容

在 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 文件中设置一些断点,然后在调试视图中开始调试。