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

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - electron-开发者模式
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-1)

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

打开devtools

mainWindow.webContents.openDevTools()

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

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - mode_default
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-2)

界面右侧打开devtools

mainWindow.webContents.openDevTools({mode:'right'})

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - mode_right
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-3)

界面底部打开devtools

mainWindow.webContents.openDevTools({mode:'bottom'})

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - mode_bottom
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-4)

界面左侧打开devtools

mainWindow.webContents.openDevTools({mode:'left'})

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

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - mode_left
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-5)

分离状态打开devtools

mainWindow.webContents.openDevTools({mode:'detach'})

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - mode_detach_2
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-6)

mainWindow.webContents.openDevTools({mode:'undocked'})

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - mode_undocked_2
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-7)

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

关闭devtools

mainWindow.webContents.closeDevTools()

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

electron 如何打开开发者工具 devtools ,如何进入开发者模式 - close
electron 如何打开开发者工具 devtools ,如何进入开发者模式(图8-8)

附加信息

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

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

总结

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

更多electron的相关精彩文章,请点击苏南大叔的博客:

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

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

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

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