如何在 webview 中打開開發人員工具

Question

我正在使用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

如果您需要一些信息來幫助我，請索取。 感謝您提前提供幫助！

*編輯：**

Answer 1

單擊 devtools 右上角的漢堡菜單圖標。 該菜單頂部的“Dock side”項目應允許您選擇所需工具的位置。

但在某些情況下，Chromium 無法對瀏覽器窗口進行足夠的控制，無法在其中放置開發工具。 您可能會遇到嵌入式 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();
});