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

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

相关链接

结束语

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

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

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

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

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

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