Как открыть инструменты разработчика внутри веб-просмотра

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

На самом деле все оказалось просто:

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

Нажмите значок меню гамбургера в правом верхнем углу devtools. Пункт «Сторона док-станции» в верхней части этого меню должен позволить вам выбрать, где вы хотите использовать инструменты.

Но при некоторых обстоятельствах Chromium не имеет достаточного контроля над окном браузера, чтобы поместить в него devtools , Возможно, вы столкнулись с этой проблемой при помощи встроенного электронного представления.