Javascript 如何在webview中打开开发人员工具

我正在用Electron开发一个浏览器。我一直在尝试打开

webview

的开发人员工具，我使用了该代码：

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

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

我想知道谁可以将其并排打开到

webview

（通过创建另一个显示开发人员工具的

webview

）或通过其他方式…）。 例如，以下是Baker浏览器的照片（Braker浏览器是使用Electron开发的浏览器）：

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

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

如果你需要一些缺少的信息来帮助我，请询问。谢谢你的帮助

*编辑：**

---

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

但在某些情况下，Chromium无法对浏览器窗口进行足够的控制，无法在其中放置devtools。您的嵌入式电子视图可能会遇到这个问题

---

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

但在某些情况下，Chromium无法对浏览器窗口进行足够的控制，无法在其中放置devtools。您的嵌入式电子视图可能会遇到这个问题

---

事实证明这很容易：

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

---

事实证明这很容易：

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

---

在打开的窗口中没有Dock side选项。重新加载页面并检查最后一个图像。打开的窗口中没有Dock side选项。重新加载页面并检查最后一个图像。上面的代码段工作正常，将devtools添加到另一个webview标记中。但这就好像devtools视图不是在“检查”网页。它的Elements选项卡是空白的。上面的代码片段工作了，在另一个webview标记中添加了一个devtools。但这就好像devtools视图不是在“检查”网页。它的“元素”选项卡为空