简体   繁体   中英

Dev Tools size and position in Electron

How can I change the size and position of Dev Tools in different modes in Electron? Currently I use simple function in my main.js to open dev tools at app start, that's basically just one line:

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.

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:

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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