Electron开发实战之记帐软件20——主进程调试

代码仓库： https://github.com/hilanmiao/LanMiaoDesktop

Tips：由于我使用的是electron-vue脚手架，因此架构（文件目录）比较复杂，若是你的项目很简单，好比入口在根目录的main.js中，那就不用看本篇文章了，直接右键debug运行就行了。

方式一：使用chrome://inspect调试

1.修改两处代码方便咱们调试

2.运行 npm run dev,而后在浏览器打开chrome://inspect

3.添加5858监听的端口，

而后稍等一会或者刷新页面后就会出现你要调试的目标了，点击inspect

而后添加咱们的项目源码目录，并在弹出的受权窗口中选择“容许”

而后开始调试咱们的代码就ok了。

可是使用chrome://inspect有一些注意事项，能够参考文章 https://newsn.net/say/chrome-inspect-electron.html 其实也没有做者说的这么麻烦，不过确实要多试几回熟悉了就很顺畅了。

方式二：使用webstorm调试（有问题，待完善）

目前有问题，调试确实能够，可是我画面没有渲染出来哇！！！这个等我再咨询下别的同志吧

若是你用的是比较简单的架构，好比官方的quick-start这种，入口就是在根目录下，怎么折腾都是ok的，直接右键debug，so easy......

可是个人项目比较复杂，全部是须要配置两个地方，如图

Node interpreter: 项目目录/node_modules/.bin/electron.cmd(mac下是/electron)
Node parameters: --inspect-brk=5858 .

而后debug就ok了

方式三：使用vscode调试

好像vscode也很简单，不过我没试过，推荐你们看看苏南大叔的文章

https://newsn.net/tag/vscode/2/