How to open developer tools inside of a 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):

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!

*Edit:**

回答1:

Click the hamburger menu icon at the top right of devtools. The "Dock side" item at the top of that menu should allow you to choose where you want the tools.

But under some circumstances Chromium doesn't have enough control over the browser window to place the devtools in it. You may be hitting that problem with your embedded Electron view.

回答2:

It actually turned out to be easy:

const wv = document.getElementById("MyWebView");
wv.addEventListener('dom-ready', () => {
  const devtoolsView = document.getElementById('DevTools');
  const browser = wv.getWebContents();
  browser.setDevToolsWebContents(devtoolsView.getWebContents());
  browser.openDevTools();
});

来源：https://stackoverflow.com/questions/60989426/how-to-open-developer-tools-inside-of-a-webview

标签

javascript

html

node.js

electron

chromium