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

Question

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

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

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

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

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

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

如果您缺少某些信息以帮助我，请提出要求。感谢您提前提供帮助！

*编辑：**

Answer 1

点击开发者工具右上角的汉堡菜单图标。该菜单顶部的 "Dock side" 项应允许您选择所需工具的位置。

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

Answer 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();
});

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

How to open developer tools inside of a webview

html

javascript

chromium

node.js

electron