How to make the dev tools not show up on screen by default in Electron?

Question

I am using electron-react-boilerplate to create an Electron-React app. The dev tools show up on the screen by default. How can I make the dev tools only appear when I ask for them and not show up on launch?

Also, there are no errors shown in the console, so the dev tools are not showing up because there's an error.

Answer 1

Just comment or remove this line of code in main.js file (setting devTools to false) this.mainWindow.openDevTools(); (or) Add the following code to

     mainWindow = new BrowserWindow({ 
     width: 1024,
     height: 768,
     webPreferences: {
      devTools: false
      }
   });

(or) change the package.json build to npm run build && build --win --x64 (or) again install npm

Answer 2

If we add devTools: false in webPreferences, DevTools will not show when you start the Electron app. However, it can still be opened by pressing Ctrl + Shift + I.

webPreferences: {
   devTools: false
}

Have a look at Slack. It is made with Electron and DevTools does not open when you press Ctrl + Shift + I.

I've had a look at Electron's official documentation, and I found a solution which doesn't allow DevTool's to open when you press Ctrl + Shift + I.

const { app, globalShortcut } = require('electron');

app.on('ready', () => {
    // Register a shortcut listener for Ctrl + Shift + I
    globalShortcut.register('Control+Shift+I', () => {
        // When the user presses Ctrl + Shift + I, this function will get called
        // You can modify this function to do other things, but if you just want
        // to disable the shortcut, you can just return false
        return false;
    });
});

But, this will block all other browser's Ctrl + Shift +I So, you can write the above code whenever your electron app is focused. And, remove it when your app is blur. This way you get a proper solution for this issue.

Answer 3

What makes the Developer Tools appear when the app starts is the line require('electron-debug')() in src/main/main.ts. This function has a showDevTools option which defaults to true, so you should change it to false:

require('electron-debug')({ showDevTools: false });

You will still be able to show the Developer Tools with the shortcut Ctrl + Shift + I or pressing F12, if you want to disable it completely, set webPreferences.devTools to false on new BrowserWindow:

mainWindow = new BrowserWindow({
  // ... other settings
  webPreferences: {
    // ...
    devTools: false,
  },
});

Answer 4

Just add there these two bold line of code. You will not see devTool after packaging.

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

var debug = false

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

// Open the DevTools.

if(debug) mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Answer 5

Every answer mentions that the keyboard shortcut CTRL + SHIFT + I still works even after disabling devtools using devTools: false.

This is because of the registered accelerator in the Electron BrowserWindow's default menu. All you have to do is remove the menu using mainWindow.removeMenu() and none of the development related shortcut keys will work again. Even the ones like CTRL + R which reloads the page.

Answer 6

Just want to add that, if you want to disable devTools only when in production mode, you can do:

new BrowserWindow({
  webPreferences: {
    devTools: !app.isPackaged,
  },
})

P.S. This also prevents using shortcuts like Ctrl+Shift+I to toggle the devTools.

Answer 7

Just remove the line

mainWindow.webContents.openDevTools(false);

Answer 8

YEAR 2022
Code that loaded the devtools is in src/main/main.ts
Search this following code:

const isDebug =
  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';

if (isDebug) {
  require('electron-debug')();
}

you need to disable electron debug by comment it

//require('electron-debug')();