How to use e-devtools-installer?

TL; DR

Place it in the file that you included Electron in and run it after the event has ready

been selected by it:

const { app } = require('electron');
app.on('ready', functionWithTheCodeFromDocs);

      

        
        
        
      

    

You only need to do it once! The extensions persist after this code is executed.

Detailed description

Install the package

Install the package in the same way as the document tells you. In case of npm:

npm install electron-devtools-installer --save-dev

      

        
        
        
      

    

Require package

You may need to package and configure it in the file where you create the Electron application. You need to enable the install feature and (possibly several) required extensions:

With ES6 modules:

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';

      

        
        
        
      

    

From require

:

const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');

      

        
        
        
      

    

Configuration and use

I assume you need Electron somewhere:

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

      

        
        
        
      

    

The function installExtension

should be called after the application has ready

been submitted by the application. If you want to add multiple extensions, you have to call the function multiple times with different extensions using copy-paste:

app.on('ready', () => {
    installExtension(REACT_DEVELOPER_TOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});
app.on('ready', () => {
    installExtension(REDUX_DEVTOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});

      

        
        
        
      

    

Or you can write a loop:

 app.on('ready', () => {
    [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS].forEach(extension => {
      installExtension(extension)
          .then((name) => console.log(`Added Extension: ${name}`))
          .catch((err) => console.log('An error occurred: ', err));
    });
});

      

        
        
        
      

    

If you did everything correctly, after running electron .

in the project folder, you should see this in the console:

Added extension: React Developer Tools
Added extension: Redux DevTools

Keep in mind: you only need to run this code once. How Electronic BrowserWindow.addDevToolsExtension

Documentation :

The extension will be remembered, so you only need to call this API once, this API is not intended to be used in programming. If you try to add an added extension that has already been loaded, this method will not return and instead will log a warning to the console.