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