如何在 Web 视图中打开开发人员工具

Question

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

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

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

https://i.stack.imgur.com/tBLfH.png

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

https://i.stack.imgur.com/vNOWO.png

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

Electron version: 8.2.0

Chromium version: 80.0.3987.158

NodeJS version: 12.13.0

如果您需要提供一些缺失的信息来帮助我，请询问。感谢您提前提供帮助！

Answer 1

事实证明这很简单：const wv = document.getElementById("MyWebView");wv.addEventListener('dom-ready', () => {  const devtoolsView = document.getElementById('DevTools');  const browser = wv.getWebContents();  browser.setDevToolsWebContents(devtoolsView.getWebContents());  browser.openDevTools();});

Answer 2

单击开发工具右上角的汉堡菜单图标。该菜单顶部的“Dock side”项目应该允许您选择所需工具的位置。但在某些情况下，Chromium 对浏览器窗口没有足够的控制权，无法在其中放置开发工具。您可能会在嵌入式 Electron 视图中遇到这个问题。