首页
社区
课程
招聘
[原创]Electron应用调试技巧分享
发表于: 2023-7-4 14:21 1528

[原创]Electron应用调试技巧分享

2023-7-4 14:21
1528

前言

Electron是一个使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它基于Node.js和Chromium,被Atom编辑器和许多其他应用程序使用。
Electron兼容Mac、Windows和Linux,可以构建出三个平台的应用程序。
相对而言,Electron 的维护成本较低,因而十分流行。VS Code、一些企业的即时通讯工具等,都使用了Electron。但存在性能问题,同时也引入了其他的安全问题。

分析Electron应用

一个正常的Electron程序,通常它的 JS 源码会被打包到 .asar文件中,或者直接以JS文件的方式存储在程序目录内,下面是一个例子。

针对asar文件,可以用官方提供的工具(e98K9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6Y4K9i4c8Z5N6h3u0Q4x3X3g2U0L8$3#2Q4x3V1k6W2L8r3g2U0N6s2u0G2L8W2)9J5c8X3q4K6j5i4t1`.) 进行解包分析,通过extract参数进行解包,当然直接看解包以后的代码并不是很友好,所有这里不做演示。

chrome调试Electron应用

Electron应用实际上也是个Chromium ,可以通过Chromium的方式开启开发者工具。以某工具为例为例,在运行程序时,添加--remote-debugging-port=xxxx 参数,即可在对应端口为Electron应用的主窗口开启远程调试功能:
这里端口需要根据inspect(chrome://inspect/)中的配置来选择。

这里使用9222端口,在命令行添加参数启动。

启动后可以在inspect页面看到对应的Target:

然后就可以点击进入进行调试了,不过此时开启的是Render Process的开发者工具。

我们可以通过添加--inspect=9222参数来调试Main Process。

Debugtron调试Electron应用

Debugtron是一个基于Electron开发的客户端桌面GUI程序,可以用于调试生产环境下的 Electron 应用。
项目地址:bbeK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6Y4K9i4c8Z5N6h3u0Q4x3X3g2U0L8$3#2Q4x3V1k6H3k6o6c8V1x3e0m8Q4x3V1k6V1k6h3u0#2k6%4c8J5L8$3^5`.
直接下载对应的Releases版本,安装后即可使用。

直接将要调试的Electron应用拖拽过来即可。

不过debugtron中没有找到堆栈调用的信息,可以根据这里端口(devtools),添加到inspect的配置中,用chrome的inspect进行调试。

这样就能跑起来,调起来了。
不过现在大多的应用都会对关键的js进行混淆加密,或者使用修改过的Chromium内核,要分析还是要有耐心。

参考

Electron 的一些调试技巧23fK9s2c8@1M7s2y4Q4x3@1q4Q4x3V1k6Q4x3V1k6E0M7q4)9J5k6i4N6W2K9i4S2A6L8W2)9J5k6i4q4I4i4K6u0W2j5$3!0E0i4K6u0r3M7#2)9J5c8W2S2z5j5#2g2j5P5U0j5@1x3s2N6w2d9Y4p5H3M7p5S2u0c8%4y4Z5k6#2p5`.


[培训]内核驱动高级班,冲击BAT一流互联网大厂工作,每周日13:00-18:00直播授课

收藏
免费 5
支持
分享
最新回复 (2)
雪    币: 3101
活跃值: (2987)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
2
感谢师父的分享
2023-12-23 19:26
0
雪    币: 5621
活跃值: (31896)
能力值: ( LV2,RANK:10 )
在线值:
发帖
回帖
粉丝
3
感谢分享
2023-12-23 22:49
1
游客
登录 | 注册 方可回帖
返回