开发工具在Electron中的大小和位置

Question

如何在Electron中的不同模式下更改开发工具的大小和位置？ 目前，我在main.js中使用简单的功能在应用启动时打开开发工具，基本上这只是一行：

mainWindow.webContents.openDevTools({ mode: 'bottom' });

要么

mainWindow.webContents.openDevTools({ mode: 'detach' });

在单独的窗口中或在主应用程序窗口中打开我的开发工具。 我需要的是：

• 为了使分离模式的“开发工具”窗口显示在我的应用程序窗口旁边，而不是在其顶部或下方。 我想宣布它的初始位置。

• 为了使底部/右侧和分离模式的开发工具都具有我所需的大小。 在分离模式下，这将是窗口大小，在右/下模式下，这将是开发工具占用的窗口量。 开发工具打开后，我可以手动完成所有操作，因此必须有一种方法可以使它从一开始就以正确的位置和大小启动，但是我无法找到方法。

更新：一半的问题得到了回答（下面是我自己的回答），但是出于完整性考虑，关于处于“正确”或“底部”模式的Dev Tools的答案仍待解决。

Answer 1

我使用以下命令的答案设法解决了一半的问题： 如何在电子设备中设置devTools窗口位置现在，我可以使用以下代码以分离模式完全控制Dev Tools：

function DTon(){
    devtools = new BrowserWindow();
    mainWindow.webContents.setDevToolsWebContents(devtools.webContents);
    mainWindow.webContents.openDevTools({ mode: 'detach' });
    mainWindow.webContents.once('did-finish-load', function () {
        var windowBounds = mainWindow.getBounds();
        devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
        devtools.setSize(windowBounds.width/2, windowBounds.height);
    });
    mainWindow.on('move', function () {
        var windowBounds = mainWindow.getBounds();
        devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
    });
}

除了在单独的窗口中之外，它的行为基本上类似于“正确”模式下的开发工具。