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

在先前的electron经验学习中,我们可以知道,在devtool查看webview的时候,是个object。而不是html结构树。在本文的学习中,苏南大叔,将要讲述,如何使webview表现的像iframe一样,可以使用devtool查看其html结构。

代码展示

下面先展示所有相关代码,但是在不同的实验目的下,会有所变换。实验的基础代码是quick-start这个项目。

main.js

//...
function createWindow(){
  //...
  mainWindow = new BrowserWindow({width: 860, height: 660})
  mainWindow.loadURL(url.format({
     pathname: path.join(__dirname, 'index.html'),
     protocol: 'file:',
     slashes: true
  }));
  mainWindow.openDevTools({mode:'bottom'});
  //...
}
//...

index.html

<webview id="foo" src="https://electron.org.cn" allowpopups style="width:100%; height:600px;"></webview>
<script>
const webview = document.getElementById('foo')
webview.addEventListener("dom-ready", function() {
  webview.openDevTools({mode:'bottom'});
});
</script>

在上述代码中,我们有两个devtool的加载点。一个放置在主进程main.js中,一个放置在渲染进程index.html中。我们将针对这两部分代码,进行深入探讨。

主进程devtool查看webview

在主进程中的devtool可以展示index.html的dom结构,但是展示webview的时候,显示为object。

electron如何使用devtool调试webview - main_devtool

electron如何使用devtool调试webview(图4-1)

渲染进程devtool查看webview

在渲染进程中的devtool,只能展示webview里面页面的dom结构,即弥补上述object内的html结构情况。但是通过webview打开的devtool,并不能自定义位置,恒定为:mode:'detach'。我们范例代码中,传递的mode:'bottom'是不生效的。

electron如何使用devtool调试webview - webiew_devtool

electron如何使用devtool调试webview(图4-2)

两个devtool同时展示

两个devtool并不冲突,各司其职,并不冲突。

electron如何使用devtool调试webview - both_devtool

electron如何使用devtool调试webview(图4-3)

第一个devtool调用出第二个devtool

毕竟devtool的作用是调试,所以,在index.html中硬编码,调出第二个devtool,并不是个好的idea。那么在下图中,苏南大叔把index.html中的js,移动到了第一个devtool的console中执行。

electron如何使用devtool调试webview - both_devtool2

electron如何使用devtool调试webview(图4-4)

这样操作的话,似乎更符合调试的本质吧?

const webview = document.getElementById('foo')
webview.openDevTools();

相关链接

结束语

webview是electron里面的一个宝藏级别的组件,努力发掘一下,你会收获金子 。更多electron精彩文章,请点击这里查看。https://newsn.net/tag/electron/

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

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

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-webview-devtool.html
上一篇好文:利用winrar制作electron可执行单文件
下一篇好文:win环境,electron打包时,内存溢出的解决方案

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~