開發工具在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);
    });
}

除了在單獨的窗口中之外，它的行為基本上類似於“正確”模式下的開發工具。