How to embeding the devtool into OpenSumi layout, instead of open it in a separated windows?

[mister-teddy]

I can open the dev tool of the web view inside the simulator like this:

const webview = document.getElementById('simulator-webview')
webview.openDevTools();

But it opening the devtool in a separated window, and it's quite inconvenience because you lost focus every time switching between the two windows. How can I make the devtool as a part of the layout (like Alipay's Mini Program Studio). I already created a view component and registered it inside the bottom layout slot, and I got stuck right here👇

Thank you very much for any advice 🙏

[mister-teddy]

I managed to did it 👇 For someone who's looking for an answer: using BrowserView (instead of <webview> or <iframe>) did the trick. You can load the dev tools of the browser view inside another browser view like this:

const view = new BrowserView();
const devtoolsView = new BrowserView();
const browserWindow = this.app.getCodeWindows()[0].getBrowserWindow();
browserWindow.addBrowserView(view);
browserWindow.addBrowserView(devtoolsView);
view.webContents.on('dom-ready', () => {
  view.webContents.setDevToolsWebContents(devtoolsView.webContents);
  view.webContents.openDevTools({
    mode: 'detach', // detach mode is important otherwise it would cause unexpected behavior
  });
});

However using BrowserView you have to do complicated stuff to match them to the size and location inside OpenSumi layout, because unlike <iframe> or <webview>, it's not a part of the DOM.