How to set the devTools window position in electron

user_4941988 0
Viewed 1264

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)?

electron
1 Answers

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);
    });
});
user_65776640
Related