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

Question

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

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

或者

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

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

• 对于分离模式开发工具窗口，它会出现在我的应用程序窗口旁边，而不是在它的顶部或下方。我想声明它的初始位置。

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

更新：问题的一半得到了回答（下面是我自己的答案），但为了完整起见，关于“右”或“底”模式下的开发工具的答案仍有待讨论。

Answer 1

我设法使用以下答案解决了一半的问题： How to set the devTools window position in electron 现在我可以使用以下代码在分离模式下完全控制开发工具：

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);
    });
}

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