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

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

下面是一般的使用场景:为啥我的electron白屏了?打包之后就不行了。调试的时候,都是可以的,打包之后就不行了。啥?打包之后,咋打开开发者工具?到底咋打开?还能打开嘛?由于electron打包后白屏的概率实在太大,而白屏的调试方式就是打开开发者模式看错误日志。所以,在这里反复问的人,实在太多。

electron 打包之后,如何使用 F12 再次开启开发者工具? - devtool-img
electron 打包之后,如何使用 F12 再次开启开发者工具?(图2-1)

苏南大叔说了,想办法执行mainWindow.webContents.openDevTools()即可。但是,鉴于伸手党实在太多,那么本文中,苏南大叔就继续案例下:打包之后,如何打开electron的开发者工具。

前置阅读链接如下:https://newsn.net/say/electron-devtools.html

核心代码

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

mainWindow.webContents.openDevTools();

或者

mainWindow.openDevTools();

打包之后如何打开开发者工具,那就是想办法执行上述代码即可。

方案1,合适位置执行代码

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

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

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

方式2,渲染进程事件触发

就是说两个事件,渲染进程的事件,通过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:这里是【评论】可见内容

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

相关链接

总结

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

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

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

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

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!