如何在 VSCode 中调试 Electron
目录
1 步骤
- 将 vscode 切换到 debug 视图 (
Ctrl+Shift+D)
- 打开 launch.json
.在 configurations节点下添加以下对象并保存
|
1 2 3 4 5 6 7 8 |
{ "type": "node", "request": "launch", "name": "Electron Main", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "program": "${workspaceRoot}/main.js", "protocol": "legacy" } |
- 在 main.js 中添加一个断点
- 在 vscode 中点击 "开始调试"
，命中断点，即可开始调试。
2 变量
在 launch.json 中有一些预定义的变量：
${workspaceRoot}VSCode 打开的文件夹目录路径${workspaceRootFolderName}根路径文件夹名称${file}当前打开的文件${relativeFile}当前打开文件相对于workspaceRoot的相对路径${fileBasename}当前打开文件的文件名${fileBasenameNoExtension}不带扩展名的文件名${fileExtname}当前打开文件的扩展名${fileDirname}当前打开文件的文件夹名称${cwd}运行任务的工作路径${lineNumber}当前文件的选择行
除了这些预定义的变量，还可以使用
${env:Name}来使用环境变量，如${env:PATH}${config:Name}来使用 VSCode 的设置，如${config:editor.fontSize}${command:CommandID}来执行命令行，如${command:explorer.newFolder}(windows)
3 不同操作系统的配置
launch.js 还支持对不同的操作系统作特殊配置，如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceRoot}", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd" }, "args" : ["."] } ] } |
对于 runtimeExecutable 节点， windows 操作系统使用 electron.cmd 文件，而其它操作系统使用 electron 操作系统分别定义为: windows , linux , osx 三种。