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.

Laughlin

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

Bois

If set this.mainWindow.openDevTools();, it can still open in View/Toggle Developer Tools. But if set devTools: false in webPreferences, Toggle Developer Tools will be disabled. – Souther

Answer 2

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

Hephzipah

Thank you!!! This was frustrating me so much, and this is the only answer here that actually answers the question that was asked. I wish the OP would mark it as an answer, but it's old enough that I doubt anyone's paying attention. – Patency

Answer 3

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.

Cleo

I'm not able to open dev tools via Ctrl+Shift+I withdevTools:false. Perhaps that was disabled in more recent version of electron (I'm on v13) – Scuttlebutt

@TyHitzeman you unfortunately can on child windows. Only way to prevent it is to use a keydown listener on preload for the key combination and prevent the default action. – Assignation

@TyHitzeman yes, only using devTools:false did the trick for me. – Merit

Answer 4

Just remove the line

mainWindow.webContents.openDevTools(false);

Froth

Answer 5

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.

Karlin

Answer 6

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.

Assignation

Answer 7

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.

Queenqueena

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

Brokendown

Answer 9

WARNING: The following methods only work if you disable the toolbar in your electron app to this add the following code just after the code that creates the browser window before loading the html:

//Considering "window" is your electron window object
window.setMenuBarVisibility(false)

In the webpage loaded by electron add that after the html closing tag:

<script>
    window.addEventListener("keydown", function (event) {
        //Control shift i                                                                                                  
        if (event.ctrlKey && event.shiftKey && event.key === "I") {
            event.preventDefault()
        }
        //Control shift j
        if (event.ctrlKey && event.shiftKey && event.key === "J") {
            event.preventDefault()
        }
        //Control shift c
        if (event.ctrlKey && event.shiftKey && event.key === "C") {
            event.preventDefault()
        }
        //F12
        if (event.key === "F12") {
            event.preventDefault()
        }
        //CMD option i
        if (event.metaKey && event.altKey && event.key === "I") {
            event.preventDefault()
        }
        //CMD option j
        if (event.metaKey && event.altKey && event.key === "J") {
            event.preventDefault()
        }
        //CMD option c
        if (event.metaKey && event.altKey && event.key === "C") {
            event.preventDefault()
        }
    });
</script>

If you also want to block reload, add the following either after the previous code or the closing html tag (in the webpage loaded by electron:

<script>
    window.addEventListener("keydown", function (event) {
        //Control shift r                                                                                              
        if (event.ctrlKey && event.shiftKey && event.key === "R") {
            event.preventDefault()
        }
        //Control r
        if (event.ctrlKey && event.key === "R") {
            event.preventDefault()
        }
        //F5
        if (event.key === "F5") {
            event.preventDefault()
        }
        //Shift F5
        if (event.shiftKey && event.key === "F5") {
            event.preventDefault()
        }
        //Control F5
        if (event.ctrlKey && event.key === "F5") {
            event.preventDefault()
        }
    });
</script>

Hockett

Answer 10

in electron 31.1.0 we can hide are devtools with help of

   // mainWindow.webContents.openDevTools(); 

comment this code inside createWindow function

this is exist in src/main.js

  const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
    autoHideMenuBar: true,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
};

Indaba