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

在electron开发的过程中,可以用代码控制打开自带chrome的devtools开发者工具,进而调试渲染教程页面。平时,我们利用chrome要调试网页的时候,按f12(mac下面是shift+花+i)打开的开发者工具,就是这个devtools。

下面苏南大叔,接着以electron的quick-start范例为例,说明利用electron的webContents对象打开及关闭devtools的方法。下面的例子中,我们都是基于main.js中的createWindow中的mainWindow.webContents.进行操作的。

打开devtools

openDevTools()

默认状态下,开发者工具的位置是上一次工具打开的位置(左边,右边,下边都有可能。取决于上一次的状态,但不会是分离状态,也没有处于顶部的状态)。

electron打开开发者工具devtools的方法 - mode_default

界面右侧打开devtools

openDevTools({mode:'right'})

electron打开开发者工具devtools的方法 - mode_right

界面底部打开devtools

openDevTools({mode:'bottom'})

electron打开开发者工具devtools的方法 - mode_bottom

界面左侧打开devtools

openDevTools({mode:'left'})

这个left属性在官方文档里面,并不存在,是苏南大叔自己实验出来的。当然top属性是绝对不支持的,大家不用实验了。

electron打开开发者工具devtools的方法 - mode_left

分离状态打开devtools

openDevTools({mode:'detach'})

electron打开开发者工具devtools的方法 - mode_detach_2

openDevTools({mode:'undocked'})

electron打开开发者工具devtools的方法 - mode_undocked_2

这两种情况下,devtools都是不和electron的界面在一起的,都是分离状态。但是 undocked 状态下,这个开发者工具是可以合并到主界面中的。detach状态下,是永久分离的。这个就是两者的区别,注意看图标箭头所示位置。

关闭devtools

closeDevTools()

使用上述方法,就可以通过程序关闭devtools。截图中的代码,作用是30秒后,主动关闭devtools。

electron打开开发者工具devtools的方法 - close

附加信息

这个开发者工具devtools在正式打包过的release中,也是可以打开的,只不过快捷键似乎是不生效的。如果您想在release中使用开发者工具的话,想办法执行mainWindow.webContents.openDevTools()即可。

开发dev状态的话,electron的开发者工具,也是可以使用快捷键呼出的。win下的快捷键是:ctrl+shift+i,mac下的快捷键是:alt+花+i。这两个快捷键和chrome的定义,是有所区别的,这个请大家注意一下即可。

总结

本篇内容,是最基本的渲染进程调试的前提,大家可以根据自己的喜好,设置devtools的位置,并选择合适时机关闭devtools。更多信息,可以点击这里查看相关中文文档。https://electron.org.cn/doc/api/web-contents.html

更多electron的相关精彩文章,请点击苏南大叔的博客:https://newsn.net/tag/electron/

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。