已打包Electron程序启动和禁用调试工具的方法

方式 1：

在程序的启动命令行中添加 --remote-debugging-port=8888 参数，然后使用浏览器打开调试页面 http://127.0.0.1:8888 即可进行调试。

这种方式默认调试的是渲染进程，如需调试主进程则需要使用 --inspect=8888 参数。

另外，如果打开调试页面时提示 WebSockets request was expected 而无法显示调试工具，需要使用访问 chrome://inspect/ 打开 inspect 页面，配置对应的发现 ip 和端口，如localhost:8888：

配置完成后，刷新 inspect 页面后在 Remote Target 中选择对应的调试目标进行调试。

方式 2（需 nodejs 环境）：

1. 解包和打包 asar¶

打包好的 Electron 程序源码存放在 resources/app.asar 中，解包后可修改

1. 安装 asar 工具

   Bash
   npm install -g asar

    

2. 解包 asar 文件

   Bash
   # 方式 1：命令行解包 asar extract app.asar ./app # 方式 2：Node.js 代码解包 const asar = require('asar') asar.extractAll('app.asar', './app')

    

3. 打包 asar 文件

   Bash
   # 方式 1：命令行打包 asar pack ./app app.asar # 方式 2：Node.js 代码打包 const asar = require('asar') asar.createPackage('./app', 'app.asar')

    

2. 修改 index.html¶

修改 index.html，插入控制台代码，VConsole 和 Eruda 二选一，推荐 Eruda

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js"></script>
<script>const vConsole = new VConsole();</script>

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

也可以找到主进程的代码，并找到窗口实例，修改下面代码打开 devtools

// 主窗口创建
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // 增加代码
  mainWindow.webContents.openDevTools({mode:'undocked'})

修改保存后重新打包 asar 并运行程序

asar pack ./app app.asar