electron 打包之后，如何使用 F12 开启开发者工具？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文是个续文，上一篇文章是：《electron打开开发者工具devtools的方法》，大家可以从文末找到相关链接。说的就是electron打开开发者工具这件小事儿。那么既然是小事儿，那么为啥还要说呢？因为问的人太多了...

下面是一般常见的提问场景：为啥我的electron白屏了？打包之后就不行了。调试的时候，都是可以的，打包之后就不行了。啥？打包之后，咋打开开发者工具？到底咋打开？还能打开嘛？

由于electron打包后白屏的概率实在太大，而白屏的调试方式就是：打开开发者模式看错误日志。所以，在这里反复问的人，实在太多。苏南大叔说了，想办法执行下面的代码即可：

mainWindow.webContents.openDevTools()

但是，鉴于伸手党实在太多，那么本文中，苏南大叔就继续案例下：打包之后，如何打开electron的开发者工具。前置阅读链接如下：

• https://newsn.net/say/electron-devtools.html

核心代码

在主进程中，执行下面的两条代码中，任意一条即可打开electron的开发者工具。至于控制开发者工具的出现位置，这里苏南大叔就不再次说明了，可以查看文末相关文章链接。

mainWindow.webContents.openDevTools();

或者

mainWindow.openDevTools();

或者

require('electron-debug')({ showDevTools: true });

打包之后如何打开开发者工具，那就是想办法执行上述代码即可。值得注意的是：最后一条语句，必须在窗体出现之前执行，否则是不生效的。日常操作的话，请摒弃第三条，使用前两条语句。

方案一，合适位置执行代码

这个不用多说，如果打包也是一种开发调试模式的话，那么使用代码打开开发者工具，是很正常的。对吧？

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  //...
  mainWindow.webContents.openDevTools()
  //...
}

调试完毕了，您再把这句话给注释掉。再重新打包一次，没有啥难度吧？

方式二，渲染进程事件触发

就是说两个事件，渲染进程的事件，通过ipc触发主进程。主进程执行打开开发者工具devtools。比如：下面的代码中，渲染进程里面，有个按钮，点击按钮即可打开devtools。

index.html：

<button id="webContents">devtools</button>
<script>
const { ipcRenderer } = require('electron')
document.getElementById('btn').addEventListener('click', ()=>{
    ipcRenderer.send('open-devtools')
})
</script>

main.js:

const {ipcMain} = require('electron')
ipcMain.on('open-devtools', (event, arg) => {
  mainWindow.openDevTools();
})

方案三，主进程注册快捷方式

比如，这里注册一个全局快捷键，F12。
main.js:

不过，快捷键不是想注册成功就注册成功的，有冲突的可能性。所以，这里不要抱怨为啥定义的快捷键没有注册成功之类的，一般来说，就是快捷键冲突了呗，你懂的。

方案四，渲染进程调用remote打开

本段代码适合于渲染进程，不适合于主进程，请各位小白想明白了，再复制。

const { remote } = require('electron')
remote.getCurrentWebContents().openDevTools()

这个方案的前提是：开启了nodeIntegration: true。详情请参见：

• https://newsn.net/say/electron-require-not-defined.html

白屏解决方案

打包之后，触发开发者工具的方式太多了，发挥您的想象力，想办法执行openDevTools() 即可。每个人都有自己的选择，对吧？

写好上述代码之后，然后就是用packager或者builder打包了。如果打包完成后，就大概率的会白屏，那么然后要做什么呢？呼叫出开发者工具，看看报错信息，一般来说都是缺少某某模块的报错。那么，请缺什么模块，就npm install --save某模块，然后重新打包试试，大概的思路就是这样的。

npm install <缺少的模块> --save

相关链接

• https://newsn.net/say/electron-devtools.html
• https://newsn.net/say/electron-webview-devtools.html

结束语

更多electron的经验文字，请点击苏南大叔的文章：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。