如何在 webview 中打开开发者工具答案

【问题标题】：How to open developer tools inside of a webview如何在 webview 中打开开发者工具
【发布时间】：2020-07-14 07:08:00
【问题描述】：

我正在使用 Electron 开发浏览器。我一直在尝试打开webview 的开发者工具，我使用该代码做到了：

document.getElementById("MyWebView").openDevTools();

但问题是开发者工具'窗口是作为弹出窗口（另一个窗口）打开的：

我想知道我可以将它与webview 并排打开（通过创建另一个显示开发者工具 的webview 或通过其他方式...）。例如，下面是一张Baker Browser的照片（Braker Browser是使用Electron开发的浏览器）：

以下是我正在使用的 Electron 当前版本的一些信息：

Electron version: 8.2.0
Chromium version: 80.0.3987.158
NodeJS version: 12.13.0

如果您需要一些信息来帮助我，请向我索取。感谢您提前提供帮助！

*编辑：**

【问题讨论】：

标签： javascript html node.js electron chromium

【解决方案1】：

单击 devtools 右上角的汉堡菜单图标。该菜单顶部的“Dock side”项应允许您选择所需工具的位置。

但在某些情况下，Chromium 对浏览器窗口没有足够的控制权，无法将开发工具放入其中。您的嵌入式 Electron 视图可能会遇到这个问题。

【讨论】：

在打开的窗口中没有 Dock side 选项。重新加载页面并检查最后一张图片。

【解决方案2】：

事实证明这很容易：

const wv = document.getElementById("MyWebView");
wv.addEventListener('dom-ready', () => {
  const devtoolsView = document.getElementById('DevTools');
  const browser = wv.getWebContents();
  browser.setDevToolsWebContents(devtoolsView.getWebContents());
  browser.openDevTools();
});

【讨论】：

上述 sn-p 工作，将 devtools 添加到另一个 webview 标签中。但就好像 devtools 视图没有“检查”网页。它的元素选项卡是空白的