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的位置,并选择合适时机关闭devtools。更多信息,可以点击这里查看相关中文文档。

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

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

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

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

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

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