How to set the devTools window position in electron - electron

Question

I got this from the docs
app.on('ready', function(){
devtools = new BrowserWindow()
window = new BrowserWindow({width:800, height:600})
window.loadURL(path.join('file://', __dirname, 'static/index.html'))
window.webContents.setDevToolsWebContents(devtools.webContents)
window.webContents.openDevTools({mode: 'detach'})
})
It opens two windows, on is the dev tools. But it's exactly underneath the main window.
Is there a way to get them side by side (the screen is big enough)?

Answer 1

Once you've called setDevToolsWebContents then you can move the devtools window around just by calling devtools.setPosition(x, y).
Here is a example of moving the devtools next to the window by setting it's position whenever it's moved:
app.on('ready', function () {
var devtools = new BrowserWindow();
var window = new BrowserWindow({width: 800, height: 600});
window.loadURL('https://stackoverflow.com/questions/52178592/how-to-set-the-devtools-window-position-in-electron');
window.webContents.setDevToolsWebContents(devtools.webContents);
window.webContents.openDevTools({mode: 'detach'});
// Set the devtools position when the parent window has finished loading.
window.webContents.once('did-finish-load', function () {
var windowBounds = window.getBounds();
devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
});
// Set the devtools position when the parent window is moved.
window.on('move', function () {
var windowBounds = window.getBounds();
devtools.setPosition(windowBounds.x + windowBounds.width, windowBounds.y);
});
});