Electron应用的代码通常在resources/
目录下的app/
目录,可能被打包成app.asar
文件(或者命名为core.asar
)。在没有对app.asar
包进行额外保护的情况下,可直接解压app.asar
文件到app/
目录。
解压缩asar文件
npm install -g asar
解压: asar extract asar文件 解压文件夹
压缩: asar pack 文件夹 asar文件
Electron会优先加载app/
目录,而非app.asar
。所以解压后直接修改app/
目录下的代码,就可以简单地添加console.log
或fs.appendFileSync
输出些信息了。另外,当package.json
文件(通常在resources/app/
目录下)里的main
字段写的是app.asar/index.js
时,就会优先加载app.asar
文件,需改成app/index.js
。
设置HTTP(S)代理
运行程序时指定--proxy-server
参数:xxx.exe --proxy-server=127.0.0.1:8080
(可能无效)
或
在package.json
文件的main
字段指定的入口文件添加代码:
const {app} = require('electron')
app.commandLine.appendSwitch('proxy-server', '127.0.0.1:8080') // 相当于 --proxy-server=127.0.0.1:8080
调试主进程
运行程序时指定inpect
参数:xxx.exe --inspect=5858
,让Electron在5858端口监听调试协议,或者执行xxx.exe --inspect-brk=5858
,让程序在第一行代码上暂停执行等待调试器连接。然后打开chrome浏览器访问chrome://inspect
进行连接、调试Electron应用。
在打开的devtools的Sources栏的Filesystem栏,点击+
按钮导入app/
目录下的源码,然后下断点调试。如果真能下断点调试,就很方便了。不过有时会因为代码被混淆过或其它原因,导致断不下来。
另一种方式:在代码里加上debugger;
,加上--inspect-brk
参数运行程序,然后用chrome连接、调试,这种方式有时也是看不到源代码,不过能单步执行、打印变量、看调用堆栈。
调试渲染进程
通过DevTools来调试渲染进程。打开DevTools的几种方式:
看应用的菜单栏是否已提供打开DevTools的选项
尝试按快捷键:Windows或Linux按
Ctrl + Shift + I
,MacOS按Cmd + Opt + I
-
修改代码文件,找到要开Devtools的
BrowserWindow
实例,调用openDevTools
方法:let win = new BrowserWindow(winOptions); win.webContents.openDevTools();
查看版本号
查看应用使用的Electron的版本号:执行process.versions.electron
查看,或抓包看User-Agent
,Devtools里的数据包也有表明Electron版本号。
查看该Electron应用的版本号:在package.json
文件里查看,或执行:
electron.remote.app.getVersion() // 渲染进程里执行
electron.app.getVersion() // 主进程里执行
参考
- 《Instrumenting Electron Apps for Security Testing》,翻译版:《测试 Electron 应用的基本指南》:介绍怎么调试、抓包Electron应用。本文相当于在该文章的基础上做点补充