如何在WebView中打开开发人员工具 [英] How to open developer tools inside of a webview

问题描述

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

I'm developing a browser using Electron. I've been trying to open the developer tools of a webview, and I did it using that code:

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

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

But the problem is that the developer tools' window is opened as a pop-up window (another window):

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

I want to know who can I open it side by side to the webview (by creating another webview that shows the developer tools or by some other ways...). For example, here's a photo of Baker Browser (Braker Browser is a browser that is developed using Electron):

以下是有关电子版本的一些信息我正在使用的>

Here's some info about the current version of Electron that I'm using:

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

如果需要一些缺少的信息以帮助您我，请提出要求。谢谢您的帮助！

If there's some missing info that you need to have in order to help me, please ask for it. Thank you for helping in advance!

*编辑：**

***

推荐答案

实际上很简单：

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中打开开发人员工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！