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):
[![enter image description here](https://i.stack.imgur.com/tBLfH.png)](https://i.stack.imgur.com/tBLfH.png)

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*):
[![enter image description here](https://i.stack.imgur.com/vNOWO.png)](https://i.stack.imgur.com/vNOWO.png)

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:\*\*
[![enter image description here](https://i.stack.imgur.com/lxpnv.png)](https://i.stack.imgur.com/lxpnv.png)