Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 754
Nec Xelos Avatar asked Dec 08 '18 00:12

Nec Xelos


People also ask

How do electrons show developer tools?

Developer Tools can be accessed in two other ways. At any point, you can press “Command-Option-I” on macOS or “Control-Alt-I” on Windows or Linux. In addition, you can also trigger the Developer Tools programmatically. The webContents property on BrowserWindow instances has a method called openDevTools() .


1 Answers

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.

like image 54
Nec Xelos Avatar answered Sep 30 '22 14:09

Nec Xelos