如何在电子中设置devTools窗口位置

时间:2018-09-05 06:38:11

标签: electron

我从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'})
})

它打开两个窗口,上面是dev工具。但这恰好在主窗口下方。

有没有办法让它们并排(屏幕足够大)?

1 个答案:

答案 0 :(得分:1)

调用setDevToolsWebContents之后,只需调用devtools.setPosition(x, y)就可以移动devtools窗口。

以下是通过在每次移动时设置其位置来将devtools移至窗口旁边的示例:

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