调试Electron程序

作者: mercurygear | 来源:发表于2018-04-08 17:03 被阅读20次

    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。

    1. 先构建一个debug版的electron,参考构建Electron这篇文章,同时生成一个vs的工程
    2. 然后启动debug版的electron.exe
    3. 打开electron.sln,菜单debug --> attach to process,选择electron.exe(一般有几个,选择需要调试的那个)attach即可


      VS2017调试界面

    PS:也可以利用github提供的electron符号文件服务器而不必自行构建来调试,这里就不再深究了

    相关文章

      网友评论

      • 孟繁贵:这里建议写一个bat,这样需要调试的时候,双击运行bat即可,bat的内容如下:

        这个bat在哪里配置呢

      本文标题:调试Electron程序

      本文链接:https://www.haomeiwen.com/subject/nbzphftx.html