第17章 VSCode 调试指南

在 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 的 Build Tools 会自动处理并解释大部分流程。如果你希望手动配置环境，可以使用这些构建说明。 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 取决于若干条件，可能是以下路径之一： 测试版：如果你使用的是 Electron Build-Tools 的默认设置，或是从源码构建时沿用了默认说明。 发布版：如果你构建的是 Release 版本而非 Testing 版本。 your-directory-name：如果你在构建过程中修改了默认目录名，这里将为你指定的名称。 args 数组中的字符串 "your-electron-project-path" 应当是你用于测试的 Electron 项目目录或 main.js 文件的绝对路径。在本例中，它应指向 my-app 的路径。 3. 调试 在自选的原生 Electron C++ 代码 .cc 文件中设置一些断点，然后在调试视图中开始调试。