I'm unable to reproduce this issue with following steps:

1. Open default app
2. Open devtools and detach it
3. Close the main window

Does this issue only happen within your app?

Well. The quick-start application works for me too (updated to 10.0.0-beta.21)

But my application still has that effect and, maybe it's related, the DOM element hightlighting does not work anymore in my app. Like when I hover over a node in the Elements view in inspect mode, there's no highlighting, no tooltips on the browser window.

I try to replicate it now on the quick start by adding code that I use in my app one by one, checking if that cause the trouble but I'm pretty lost this time, as I don't really know which feature/API could potentially block the communication between browser window and devtools. Could be some electron code or it could also be an incompatible npm module.

At least, it's on all of my browser windows, of which some have svelte apps and some (most) simply show web pages from our external intranet applications. So it's one thing all browser windows have in common or it's something with the general electron app setup.

Found the issue - it's the custom-electron-titlebar which is not compatible with electron 10 and to make things worse, they just archived it so I need to fix it myself :/

To reproduce:

• use the electron quickstart
• remove the content security metas from the index.html
• add custom-electron-titlebar via package.json
• add enableRemoteModule: true to the webPreferences (it uses the remote module)
• add this to the preload, inside the listener:

  const {Color, Titlebar} = require("custom-electron-titlebar");
  new Titlebar({
    backgroundColor: Color.fromHex('#f5f5f5'),
    unfocusEffect: false,
    minimizable: true,
    maximizable: true,
    menu: null,
    shadow: false,
  });

Now, if we set frame:false on the BrowserWindow options, we can't close the windows while devtools are open. Otherwise, with frame: true, it works.

Note that typing window.close() in the devtools console also does not close the window. There is no error message observed. As if some close listener was setup with 'prevent default'

I can't tell if this is an incompatible 3rd party lib or if that lib reveals a bug in electron 10, so I keep this issue open.

Unfortunately, this doesn't seem to be responsible for the 'highlight on hover' issue that I also have with electron 10.

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!

Thanks for debugging this issue, I can confirm it is a bug of Electron.

Also confirmed it is a Windows-only bug, it can be reproduced with this app:
https://gist.github.com/zcbenz/d8a36146cf57706959cf00252746d4a1

I may look into this, is that ok for you?

So this is an issue only for the Windows OS or does this happen on other OS's as well? I wouldn't mind helping out if it's Windows only as I use Windows daily. Let me know.

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

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

I am new to electron but have C++ and Java experience. Can I take this issue?

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

It seems these methods aren't documented/typed anywhere. Is there a good place to look them up?

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!

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.

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

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

2. The window closes instantly

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

I am also facing this issue, however with the frame enabled:

{
    frame: true,
    autoHideMenuBar: true,
}

Changing frame to false has no effect. Setting autoHideMenuBar to false fixes the issue and I am once again able to close the window by clicking the X button. Only a single BrowserWindow is opened and devtools is opened (attached/windowed).
Like @cawa-93 said, there still is around a second of delay before the window closes.

Tested electron versions: 12.0.2, 12.0.7

This Issue Still relevant for v13.0.1.
@zcbenz, May you update project and labels?

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!!

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

I think this is a better workaround, it works for my version 12.0.0

Can’t we fix this? These work-arounds cost time and money to our guild.