已打包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