electron正式版如何使用F12开启开发者工具调试?

本文转载自:https://newsn.net/

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

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

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

由于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 开启开发者工具?

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

比如,这里注册一个全局快捷键,F12

main.js:

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

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

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

const { remote } = require('electron')

remote.getCurrentWebContents().openDevTools()

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

白屏解决方案

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

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

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

以上是 electron正式版如何使用F12开启开发者工具调试? 的全部内容, 来源链接: utcz.com/a/119126.html

回到顶部