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

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

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

苏南大叔:electron 打包之后,如何使用 F12 开启开发者工具? - devtool-img
electron 打包之后,如何使用 F12 开启开发者工具?(图2-1)

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

mainWindow.webContents.openDevTools()

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

核心代码

在主进程中,执行下面的两条代码中,任意一条即可打开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();
})

苏南大叔:electron 打包之后,如何使用 F12 开启开发者工具? - devtool-btn
electron 打包之后,如何使用 F12 开启开发者工具?(图2-2)

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

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

newsn.net:这里是【评论】可见内容

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

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

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

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

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

白屏解决方案

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

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

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

相关链接

结束语

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   F12    electron