electron: Can't close browser window when detached devtools window is opened (electron 10)

In case if you are handling the close in Windows may be below can help,

const currentWindow = window.require(‘electron’).remote.getCurrentWindow(); if (currentWindow.isDevToolsOpened()) { currentWindow.closeDevTools(); } currentWindow.close();

Thank you @Treverix for bringing this up! Different to you, I dont see the problem with v10.x but I can confirm this bug exists in v11.0, v11.1, v11.2 on Windows.

This is unfortunately the major issue prevents me to upgrade projects to latest Electron, until I created my version of workaround:

function fixBrowserWindowCannotCloseWhenDevToolsIsOpened(win) {
  // bug that main browser window cannot close, if devtools window is showing
  // https://github.com/electron/electron/issues/25012
  win.on('close', () => {
    if (win.webContents.isDevToolsOpened()) {
      win.webContents.closeDevTools()
    }
  })
}

Include it, call it and enjoy it!

fix for me was to set show: false, and then on ready-to-show event show the window, after that if devtools opened window closes as expected and without delay

electron version 12.0.2

Finally I found the cause and it’s an error in electron. This show the problem w/o a custom library. To reproduce:

1. create a project with the quickstart app
2. add enableRemoteModule: true to the webPreferences (it uses the remote module)
3. set frame: false on the browser window options
4. add a button on the index.html with id closeButton
5. for the preload, use the following script:

const {remote} = require('electron');

function onFocus() {
  console.log('dummy');
}
remote.getCurrentWindow().on('focus', onFocus);

window.addEventListener('beforeunload', () => {
  // removing listeners from the browser window that we get via remote
  // prevents closing the window only if the dev tools are shown.
  remote.getCurrentWindow().removeListener('focus', onFocus);
})

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('closeButton').addEventListener('click', () => {
    remote.getCurrentWindow().close();
  })
})

Start the app, open the dev tools (any mode).

Expected behavior: if we click the button on the screen, the window is closed

Observed behavior if we click the button on the screen, the window is not closed. We need to close the devtools first.

Hope that helps!

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, “bump”), and we’ll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

It seem to have been fixed in 13.2.1. Can anyone check?

I can confirm this issue. Electron v12.0.5. Windows.

BrowserWindow with autoHideMenuBar: true or frame: false doest close if devTools opened (detached or attached).

The window does not close either with native system controls or on call require('@electron/remote').getCurrentWindow().close().

Workarounds that work for me:

1. I see a delay (about a second) between clicking the “close” button and actually closing the window.

// main.js
  win.on('close', () => {
    if (win.webContents.isDevToolsOpened()) {
      win.webContents.closeDevTools()
    }
  })

1. The window closes instantly

// main.js
  mainWindow = new BrowserWindow({ show: false });
  mainWindow.addListener('ready-to-show', () => mainWindow?.show());

Same issue for me with Electon 11.3.0 and frame = false. I used also the function to fix the problem…but I also need to call window.destroy(). If I create the electron application in staging or production, this problem doesn’t occur.

In case if you are handling the close in Windows may be below can help,

const currentWindow = window.require(‘electron’).remote.getCurrentWindow(); if (currentWindow.isDevToolsOpened()) { currentWindow.closeDevTools(); } currentWindow.close();

Wow. This is an excellent solution in a temporary development environment