Electron学习笔记 5 调试主进程

调试主进程

Electron 浏览器窗口中的 DevTools 只能调试 在该窗口中执行的 JavaScript (即 web 页面) 。 为了提供一个可以调试主进程的方法，Electron 提供了 --inspect 和 --inspect-brk 开关。

命令行开关

使用如下的命令行开关来调试 Electron 的主进程：
–inspect=[port]

Electron will listen for V8 inspector protocol messages on the specified port, an external debugger will need to connect on this port. The default port is 5858.

electron --inspect=5858 your/app

--inspect-brk=[port]

和–inspector 一样，但是会在JavaScript 脚本的第一行暂停运行。

外部调试器

你需要使用一个支持 V8 调试协议的调试器

通过访问 chrome://inspect 来连接 Chrome 并在那里选择需要检查的Electron 应用程序。
使用 VSCode 进行主进程调试

JS代码的调试

由于Chromium的多进程结构，所以JS代码运行在两种不同的进程环境下，对应的调试方式也分为两种
渲染进程下的JS代码调试

这个相对简单，我们用代码打开Chromium的开发者工具即可愉快的调试了，代码如下：

let win = new BrowserWindow()
  win.webContents.openDevTools()

主进程下的JS代码调试

这部分相对麻烦些，按下面的步骤来执行：
开启命令行开关

启动electron的时候需要带上inspect开关，并配置调试端口，有两个开关，分别是–inspect=[port]和–inspect-brk=[port]，区别在于后者会暂停在第一行js代码
默认的调试端口是5858
这里建议写一个bat，这样需要调试的时候，双击运行bat即可，bat的内容如下：

electron --inspect-brk=5858

设置chrome调试器

打开chrome，然后新开一个标签进入chrome://inspect，这里我们要先配置监听的端口，不然的话，Remote Target列表里是不会出现我们要调试的electron程序的


增加一项localhost:5858

调试

在Remote Target列表里找到我们要调试的进程后，点击inspect即可打开调试工具进行调试了，这里因为我们的electron是通过bat启动的，所以进程会显示为cmd.exe

选择调试进程

调试界面

补充

其实从上图的调试界面，我们可以看到，加载的js代码都出现在这里了，所以这也是一个我们可以用来查看和调试其他用Electron开发的程序的一种手段，甚至可以做一些修改以改变程序的行为。
这也是使用electron给我们开发带来便利的同时产生的一些代价。
原生代码的调试

这部分的调试就相对会比较麻烦了，这里不详细展开，只是简略说下，因为绝大部分情况下，我们应该都不会在这个层面做调试，除非有很大的把握怀疑是Electron自身的bug。

• 先构建一个debug版的electron，参考构建Electron这篇文章，同时生成一个vs的工程

• 然后启动debug版的electron.exe

• 打开electron.sln，菜单debug --> attach to process，选择electron.exe（一般有几个，选择需要调试的那个）attach即可