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

在先前的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

渲染进程devtool查看webview

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

electron如何使用devtool调试webview - webiew_devtool

两个devtool同时展示

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

electron如何使用devtool调试webview - both_devtool

第一个devtool调用出第二个devtool

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

electron如何使用devtool调试webview - both_devtool2

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

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

相关链接

结束语

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

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