Visual Studio Code调试electron主进程
作者: jekkay 分类: electron 发布时间: 2017-06-11 14:56
一·概述
此文原出自【水滴石】： http://www.easysb.cn
对于窗口中的javascript脚本，我们可以通过谷歌浏览器的很多插件来调试，比如DevTools等。但是对于Electron中的主程序，我们需要额外的工具和方法来进行调试。
对于Electron程序，可以通过以下的命令启动程序，以方便外部调试工具通过V8调试协议来调试，其命令格式如下：
# elctron –debug=${port} path/to/app
# electron –debug-brk=${port} path/to/app
上面两种启动方式，都会使得Electron进程在指定的端口监听。这样，外部的调试工具就可以通过此端口，通过V8调试协议调试主程序。
二·VSCode 调试
使用Visual Studio Code可以调试Electron的主程序，这给我们开发调试带来很大便捷，方法如下：
1) 在当前工程下，创建文件 .vscode/launch.json
2) 在该文件中输入以下内容
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Debug Main Process”,
“type”: “node”,
“request”: “launch”,
“cwd”: “${workspaceRoot}”,
// “runtimeExecutable”: “${workspaceRoot}/node_modules/.bin/electron.cmd”,
“runtimeExecutable”: “C:/Users/Administrator.SKY-20170407TCX/AppData/Local/Yarn/bin/electron.cmd”,
“program”: “${workspaceRoot}/main.js”
}]
}
注意以下两个问题:
a) 路径问题
如果electron是局部安装的话，就执行局部环境路径，例如”${workspaceRoot}/node_modules/.bin/electron.cmd”，如果是全局安装的话，先执行yarn global bin查看全局的路径，然后将electron的路径填写进去，比如我的全局路径就是”C:/Users/Administrator.SKY-20170407TCX/AppData/Local/Yarn/bin/electron.cmd”。
b) 文件名
Linux和Windows的文件名会有所有不同，Windows的是electron.cmd，Linux的是electron，注意区分，最好的办法就是去路径下查看一下到底叫什么鬼！
3) 接下来，就可以点击菜单Debug -> Start Debugging，也可以直接按快捷键F5，启动程序。
4) 为了测试是否可以单步之类的操作，我们在主程序的第一行，打下断点，然后按下F5启动，主程序就断在了第一行代码中,而且还可以单步、查看变量以及调用栈等，相当方便，如下图。
