electron: openDevTools() not working since version 6.0.0

I ran into the problem running Windows in a VM under macOS, files shared from the host through a mapped network drive. I found out that setDevToolsWebContents (documented here) make DevTools appear.

Copying the example for simplicity:

const { app, BrowserWindow } = require('electron')

let win = null
let devtools = null

app.once('ready', () => {
  win = new BrowserWindow()
  devtools = new BrowserWindow()
  win.loadURL('https://github.com')
  win.webContents.setDevToolsWebContents(devtools.webContents)
  win.webContents.openDevTools({ mode: 'detach' })
})

Tested with Electron 7.1.4.

I have the same problem with electron@25.1.0. Neither setDevToolsWebContents solution nor “close-and-open” solution worked for me.

However, I discovered that the “wait-and-open” solution works for some reason.

    setTimeout(() => {
      mainWindow.webContents.openDevTools();
    }, 1000) // wait long enough

hey I am using electron version 10. I too have the same issue but I managed to access the devtools in the browser following these steps. ~right click the index.html and open it in the browser ~ctrl+shift+I and there you are.

let devtools = null

I ran into the problem running Windows in a VM under macOS, files shared from the host through a mapped network drive. I found out that setDevToolsWebContents (documented here) make DevTools appear.

Copying the example for simplicity:

const { app, BrowserWindow } = require('electron')

let win = null
let devtools = null

app.once('ready', () => {
  win = new BrowserWindow()
  devtools = new BrowserWindow()
  win.loadURL('https://github.com')
  win.webContents.setDevToolsWebContents(devtools.webContents)
  win.webContents.openDevTools({ mode: 'detach' })
})

Tested with Electron 7.1.4.

Works also on Electron v8. Thanks! This guy needs a price

In my case the problem was that before executing openDevTools() the open state of devtools was already true, even though it was not visible. In this case, openDevTools() does nothing (at least on Windows).

Solution 1: always execute closeDevTools() before executing openDevTools():

window.webContents.closeDevTools();
window.webContents.openDevTools();

Solution 2: implement a toggle functionality:

if (window.webContents.isDevToolsOpened()) {
  window.webContents.closeDevTools();
} else {
  window.webContents.openDevTools();
}

Anyone having this issue? Im reproducing exactly this steps with electron-quick-start and dev tools never opens.

Node.js 12.4.0, Chromium 76.0.3809.146 Electron 6.0.9.

Hi, I also have the problem of devtools that don’t load, so I add

mainWindow.webContents.openDevTools({ mode: 'detach' }) after mainWindow.loadFile('index.html')

and it works for me

I can confirm that the issue only appears when the project is running from a network drive. If I move it to a local drive the devtools open just fine.

Also, I tested version 8.0.0, same issue.

Digging a bit more I realized for my users it works fine if they open the app locally, cause normally we use a remote directory for the app, that way I can update it in real time for all my team. So this could be linked to the admin access mentioned by @jjustin3 I hope there is a workaround for this use-case.

Had this problem recently and found something that worked for me… I assume y’all are on Windows, so try running your terminal/command prompt/powershell in a non-admin mode. This eliminated the issue of devtools not opening up for me.

Edit: It is worth noting that I also had this problem on an older version and thought it was the terminal I was using that was causing the issue. This belief was due to the me switching from the old terminal to git-bash, which alleviated the problem. However, looking back I now realize that the old terminal I was using was running in admin and git-bash wasn’t until I started running it in admin a week ago. When I changed this a week ago, the problem started again. Therefore, this problem isn’t specific to a particular Electron version (could be the past few perhaps?). I hope this background info will help someone out in the future until the underlying issue is determined.

i had an issue opening the dev tools when using electron via npx electron file.js. i resolved it by installing electron and running it via yarn electron file.js

Happened to me when I updated to 18.0.3 from 16. The solution above works for me luckily

devtools = new BrowserWindow() mainWindow.webContents.setDevToolsWebContents(devtools.webContents) mainWindow.webContents.openDevTools({ mode: ‘detach’ }) mainWindow.loadURL(…)

That did the trick. Thank you!

in 9.0.0-beta.7 the dev tools also not appear if app is running as admin