本文是个续文,上一篇文章是:《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()

相关链接

总结

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

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

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: