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 pleteness answer regarding Dev Tools in "right" or "bottom" mode is still up for grabs.
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 pleteness answer regarding Dev Tools in "right" or "bottom" mode is still up for grabs.
Share Improve this question edited Dec 8, 2018 at 23:23 Nec Xelos asked Dec 8, 2018 at 0:35 Nec XelosNec Xelos 4093 silver badges12 bronze badges2 Answers
Reset to default 15I managed to solve half of my problem using answer from: How to set the devTools window position in electron Now I am able to pletely 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.
It might also be useful to note it's possible to edit the Electron configuration file for cases where you can't repile your code.
In Windows, the file is C:\Users\<username>\AppData\Roaming\<electron app name>\Preferences.
Open that in a text editor and you should see some JSON. You can configure the dev tools there. For example, set this to undock dev tools:
"currentDockState":"\"undocked\""