electron 如何使用 devtools 调试 webview?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

渲染进程devtool查看webview

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

两个devtool同时展示

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

第一个devtool调用出第二个devtool

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

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

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

相关链接

• 《electron控制开发者工具的方法》，https://newsn.net/say/electron-devtools.html
• 《electron的webview标签之新开窗口》，https://newsn.net/say/electron-webview-window-open.html
• 《electron如何通过启动--debug参数，调用开发者工具》，https://newsn.net/say/electron-param-debug.html

结束语

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

• https://newsn.net/tag/electron/

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