Question

把 asar 文件中的业务代码解析出来之后，这些业务代码都是压缩过的，可读性比较差，要想通过这些代码文件分析线上应用的业务逻辑是非常困难的，所以最好还是能想办法调试这些业务代码才行。

通过如下命令启动一个线上 Electron 应用：

D:\\yourApp\\yourProductName.exe --inspect=7676 --remote-debugging-port=7878

这个命令在启动 Electron 应用程序时，为目标程序指定了两个端口号，一个是通过--inspect 指令指定的，一个是通过--remote-debugging-port 指令指定的，接下来要根据这两个端口号获取调试地址。

打开谷歌浏览器，访问如下两个地址：

http://127.0.0.1:7676/json
http://127.0.0.1:7878/json

这两个地址均会响应 JSON 字符串，响应结果是一个对应着主进程的调试信息，示例如下：

{
"description": "node.js instance",
"devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:7676/85ac5529-d1a5-49b3-8655-f71c7c198b71",
"devtoolsFrontendUrlCompat": "devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:7676/85ac5529-d1a5-49b3-8655-f71c7c198b71",
"faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico",
"id": "85ac5529-d1a5-49b3-8655-f71c7c198b71",
"title": "Node.js[25204]",
"type": "node",
"url": "file://",
"webSocketDebuggerUrl": "ws://127.0.0.1:7676/85ac5529-d1a5-49b3-8655-f71c7c198b71"
}

另一个对应着渲染进程的调试信息，示例如下：

{
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:7878/devtools/page/AFCF98D56EE8462C3D8E52FA99C02F91",
"id": "AFCF98D56EE8462C3D8E52FA99C02F91",
"title": "Vite App",
"type": "page",
"url": "app://./index.html",
"webSocketDebuggerUrl": "ws://127.0.0.1:7878/devtools/page/AFCF98D56EE8462C3D8E52FA99C02F91"
}

这两个响应中最重要的信息就是 devtoolsFrontendUrl，得到此信息后，要把它们转换为如下的格式：

devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:7676/e9c9b139-a606-4703-be3f-f4ffc496a6aa

devtools://devtools/bundled/inspector.html?ws=127.0.0.1:7878/devtools/page/33DFD3D347C1B575DC6361CC61ABAEDE

这个转换过程是一个简单的字符串替换，如果你嫌麻烦也可以用如下代码进行替换：

devtoolsFrontendUrl.replace(/^\/devtools/, "devtools://devtools/bundled");

把转换后的地址放入谷歌浏览器中，将得到如下图所示结果，可以试着在对应的源文件中下一个断点试试看。

如果目标应用的源码是压缩过的，可以尝试点击调试器右下角的 {} 按钮美化代码，查看美化后的代码，这样就可以更方便地下断点调试了。

通过这种方法只能调试市面上一部分基于 Electron 开发的应用，并不是所有的基于 Electron 开发的应用都能使用这种方法调试。