如何在 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.0Chromium version: 80.0.3987.158NodeJS 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 视图中遇到这个问题。