简体   繁体   English

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

[英]Dev Tools size and position in Electron

How can I change the size and position of Dev Tools in different modes in Electron? 如何在Electron中的不同模式下更改开发工具的大小和位置? Currently I use simple function in my main.js to open dev tools at app start, that's basically just one line: 目前,我在main.js中使用简单的功能在应用启动时打开开发工具,基本上这只是一行:

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

or 要么

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

to open my dev tools either in separate window or as part of the main app window. 在单独的窗口中或在主应用程序窗口中打开我的开发工具。 What I need is: 我需要的是:

  • For detached mode Dev Tools window to appear next to my app window instead of on top of it or under it. 为了使分离模式的“开发工具”窗口显示在我的应用程序窗口旁边,而不是在其顶部或下方。 I'd like to declare it's initial position. 我想宣布它的初始位置。

  • For both bottom/right and detached mode Dev Tools to have exactly the size I need. 为了使底部/右侧和分离模式的开发工具都具有我所需的大小。 In detached mode it would be the window size and in right/bottom modes this would be how much of the window do Dev Tools take. 在分离模式下,这将是窗口大小,在右/下模式下,这将是开发工具占用的窗口量。 I can do all that manually after Dev Tools open so there has to be a way to make it start in correct position and size from the beginning, yet I'm unable to find out how. 开发工具打开后,我可以手动完成所有操作,因此必须有一种方法可以使它从一开始就以正确的位置和大小启动,但是我无法找到方法。

UPDATE: Half of the question answered (my own answer below), but for the sake of completeness answer regarding Dev Tools in "right" or "bottom" mode is still up for grabs. 更新:一半的问题得到了回答(下面是我自己的回答),但是出于完整性考虑,关于处于“正确”或“底部”模式的Dev Tools的答案仍待解决。

I managed to solve half of my problem using answer from: How to set the devTools window position in electron Now I am able to completely control Dev Tools in detached mode using this code: 我使用以下命令的答案设法解决了一半的问题: 如何在电子设备中设置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);
    });
}

It basically behaves like Dev Tools in "right" mode, except for being in separate window. 除了在单独的窗口中之外,它的行为基本上类似于“正确”模式下的开发工具。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM