本文详细介绍已打包 Electron 程序的调试方法，包括主进程与渲染进程调试技巧、asar 文件解包与修改、调试工具安装等，解决 WebSockets request was expected 等常见问题，适合 Electron 开发者快速排查程序故障。
对于已经打包发布的 Electron 程序，仍然可以通过多种方式进行调试。以下是针对已打包 Electron 应用的详细调试方法，包含命令行调试、asar 文件修改等实用技巧。
一、直接启动已打包程序进行调试
即使是已打包的 Electron 程序，也可以通过命令行参数开启调试功能，无需修改程序本身。
1. 渲染进程调试
找到已打包程序的可执行文件路径，在命令行中启动并添加调试参数：
bash
# Windows 示例
your-electron-app.exe --remote-debugging-port=8888
# macOS 示例
/Applications/YourApp.app/Contents/MacOS/YourApp --remote-debugging-port=8888
# Linux 示例
./your-electron-app --remote-debugging-port=8888
启动后，打开浏览器访问以下地址即可调试渲染进程：
http://127.0.0.1:8888
2. 主进程调试
如需调试已打包程序的主进程，使用 --inspect 参数：
bash
# 主进程调试
your-electron-app --inspect=8888
然后在 Chrome 浏览器中打开chrome://inspect，配置对应的端口（localhost:8888），即可在 Remote Target 中找到并调试主进程。
3. 解决调试连接问题
当出现 WebSockets request was expected 错误时：
- 打开 Chrome 浏览器，访问
chrome://inspect - 点击 “Configure” 按钮，添加
localhost:8888 - 刷新页面，在 “Remote Target” 中选择需要调试的应用
- 点击 “inspect” 即可打开调试工具
二、通过修改 asar 文件调试已打包程序
如果需要更深入地调试或修改已打包程序的代码，可以通过解包和重新打包 asar 文件实现。
1. 准备工作
确保已安装 Node.js 环境，然后全局安装 asar 工具：
bash
npm install -g asar
2. 定位 asar 文件
已打包的 Electron 程序中，代码通常存储在以下路径：
- Windows：
your-app/resources/app.asar - macOS：
YourApp.app/Contents/Resources/app.asar - Linux：
your-app/resources/app.asar
3. 解包 asar 文件
将 app.asar 文件复制到安全位置，然后解包：
bash
# 命令行解包
asar extract app.asar ./unpacked-app
或使用 Node.js 代码解包：
javascript
const asar = require('asar');
asar.extractAll('app.asar', './unpacked-app');
4. 添加调试工具
解包后，修改 index.html 或其他入口 HTML 文件，添加调试控制台：
方法一：使用 Eruda（推荐）
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
方法二：使用 VConsole
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js"></script>
<script>const vConsole = new VConsole();</script>
5. 修改主进程代码开启调试
找到主进程代码（通常是 main.js 或background.js），在窗口创建后添加打开开发者工具的代码：
// 找到窗口创建代码
const mainWindow = new BrowserWindow({// 窗口配置});
// 添加以下代码
mainWindow.webContents.openDevTools({mode: 'undocked'});
6. 重新打包并替换
修改完成后，重新打包成 asar 文件：
bash
asar pack ./unpacked-app app.asar
将新生成的 app.asar 文件替换原程序目录中的同名文件，重新启动程序即可看到调试工具。
三、常见问题解决
- 权限问题 ：在 macOS 和 Linux 上修改程序文件可能需要管理员权限，使用
sudo命令 - 签名验证 ：部分程序有签名验证，修改后可能无法运行，可尝试使用
--no-sandbox参数启动 - 调试工具不显示：确保网络连接正常，能够访问 CDN 资源，或下载调试工具到本地后引用
四、Electron 调试常见问题 FAQ
1. 已打包的 Electron 程序可以调试吗？
是的，已打包的 Electron 程序可以通过命令行参数调试或修改 asar 文件的方式进行调试，无需重新编译源代码。
2. 调试 Electron 主进程和渲染进程有什么区别？
- 渲染进程调试使用
--remote-debugging-port参数，主要调试页面和前端相关代码 - 主进程调试使用
--inspect参数，用于调试 Electron 的主进程逻辑和窗口管理等功能
3. 为什么访问调试页面时出现 WebSockets 错误？
这是因为 Chrome 浏览器的调试协议需要 WebSocket 连接，解决方法是通过 chrome://inspect 页面配置并发现调试目标，而非直接访问 IP 和端口。
4. 修改 asar 文件后程序无法运行怎么办？
可能是由于权限问题或程序签名验证导致，可尝试：
- 使用管理员权限运行程序
- 检查 asar 打包是否完整
- 尝试添加
--no-sandbox参数启动
5. Eruda 和 VConsole 哪个更适合 Electron 调试？
Eruda 功能更全面，支持元素查看、网络监控等更多开发者工具功能，更适合 Electron 桌面应用调试；VConsole 更轻量，适合简单的日志查看和基本调试。
6. 没有源代码的情况下，如何调试 Electron 程序？
可以通过命令行参数开启调试模式，或解包 asar 文件查看和修改代码，添加调试工具后重新打包运行，实现无源码调试。
通过以上方法，即使是已打包发布的 Electron 程序，也能进行有效的调试和代码分析，适用于程序排错、功能分析和二次开发等场景。
