How to use electron-devtools-installer - 10 common examples

app.on('ready', () => {

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

  let check = app.getLoginItemSettings().openAtLogin
  console.log('start at login:', check)
  settings.set('start-login', check)
  createWindow()
  createPreferencesWindow()
  // createWelcomeWindow()

  let checkAutomaticallyUpdates = settings.has('check-automatically-updates') ? settings.get('check-automatically-updates') : true
  if (checkAutomaticallyUpdates) {
    console.log('automatically check updates')

)

  if (dev) {
    // If dev mode install react and redux extension
    // Also open the devtools
    const {
      default: installExtension,
      REACT_DEVELOPER_TOOLS,
      REDUX_DEVTOOLS,
    } = require('electron-devtools-installer')

    installExtension(REACT_DEVELOPER_TOOLS)
      .then(name => log.info(`Added Extension:  ${name}`))
      .catch(err => log.info('An error occurred: ', err))

    installExtension(REDUX_DEVTOOLS)
      .then(name => log.info(`Added Extension:  ${name}`))
      .catch(err => log.info('An error occurred: ', err))

    // newWindow.webContents.openDevTools()
  }

  windows.add(newWindow)
  windowById.set(newWindow.id, newWindow)

  // Emitted when the window is closed.
  const id = newWindow.id
  newWindow.on('closed', function() {
    if (process.platform !== 'darwin' && windows.size === 0) {
      app.quit()
    }
    windows.delete(newWindow)

skipTaskbar: true,
  })

  mainWindow.loadURL(isDev ? 'http://localhost:3000' : url.format({
    pathname: path.join(__dirname, '../build', 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

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

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

  // 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
    tray = null
  })

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true,
  }));

  if (process.env.NODE_ENV === 'development') {
    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    /* eslint-disable no-console */
    installExtension(REACT_DEVELOPER_TOOLS)
      .then(name => console.log(`Added Extension:  ${name}`))
      .catch(err => console.log('An error occurred: ', err));

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

  // just show the window if all content has been loaded
  mainWindow.on('ready-to-show', () => {
    mainWindow.show();
    mainWindow.focus();

    // measure startup time
    console.timeEnd('startup'); //eslint-disable-line
  });

  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows

slashes: true,
    }) + '?main');

    if (dev) {
        // Open the DevTools.
        mainWindow.webContents.openDevTools();
        const {
            default: installExtension,
            REACT_DEVELOPER_TOOLS,
            REDUX_DEVTOOLS,
        } = require('electron-devtools-installer'); // eslint-disable-line
        installExtension(REACT_DEVELOPER_TOOLS)
            .then(name => console.log(`Added Extension:  ${name}`))
            .catch(err => console.log('An error occurred: ', err));

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

    // Emitted when the window is closed.
    mainWindow.on('closed', () => {
        // 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;
    });
}

width: 1024
  };
  // configure the splashscreen
  mainWindow = Splashscreen.initSplashScreen({
    splashScreenOpts: {
      height: 400,
      transparent: true,
      width: 400
    },
    templateUrl: path.join(__dirname, 'resources', 'images', 'icon.png'),
    windowOpts: windowOptions
  });

  // Open the DevTools.
  if (isDev) {
    await installExtension(REDUX_DEVTOOLS);
    await installExtension(REACT_DEVELOPER_TOOLS);
    mainWindow.webContents.openDevTools();
  }

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

  mainWindow.on('closed', () => {
    mainWindow = null;
    logger.info('closed');
    app.quit();
  });

  mainWindow.on('unresponsive', () => {
    mainWindow = null;
    logger.info('unresponsive');

mainWindow = new BrowserWindow({
      icon: path.join(__dirname, '../resources/styles/image/logo/logo.iconset/icon_512x512.png'),
      width: 860,
      height: 750,
      minWidth: 860,
      minHeight: 680,
      backgroundColor: '#fff',
    });
  }

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

  // Open the DevTools.
  if (isDevMode) {
    await installExtension(REACT_DEVELOPER_TOOLS);
    mainWindow.webContents.openDevTools();
  }
  if (!isDevMode && process.platform === 'darwin') {
    // Create the Application's main menu
    const template = [{
      label: 'Application',
      submenu: [
        { label: 'About Application', selector: 'orderFrontStandardAboutPanel:' },
        { type: 'separator' },
        { label: 'Quit', accelerator: 'Command+Q', click() { app.quit(); } },
      ] }, {
      label: 'Edit',
      submenu: [
        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
        { type: 'separator' },

mainWindow = new BrowserWindow(defaultWindow) // put demoWindow here
  mainWindow.loadURL(config.url)

  if (is.windows()) {
    mainWindow.setMenu(null)
  }

  if (is.dev()) {
    mainWindow.setSize(1200, 600)
    mainWindow.setResizable(true)
    mainWindow.setMovable(true)
    BrowserWindow.addDevToolsExtension(path.join(__dirname, '../node_modules/devtron'))

    let installExtension = require('electron-devtools-installer')

    installExtension.default(installExtension.VUEJS_DEVTOOLS)
      .then((name) => mainWindow.webContents.openDevTools())
      .catch((err) => console.log('An error occurred: ', err))
  }

  if (is.osx() && is.production()) {
    // allow dev tools in prod
    mainWindow.webContents.on('devtools-opened', (event, deviceList, callback) => {
      mainWindow.setSize(1200, 600)
      mainWindow.setResizable(true)
    })

    mainWindow.webContents.on('devtools-closed', (event, deviceList, callback) => {
      mainWindow.setSize(WINDOW.width, WINDOW.height)
      // mainWindow.setResizable(false)
    })

width: 1000,
    webPreferences: {
      webSecurity: false,
      nodeIntegration: true,
      allowDisplayingInsecureContent: true
    }
  })

  mainWindow.loadURL(config.url)
  // mainWindow.openDevTools();
  if (process.env.NODE_ENV === 'development') {
    BrowserWindow.addDevToolsExtension(path.join(__dirname, '../node_modules/devtron'))

    let installExtension = require('electron-devtools-installer')

    installExtension.default(installExtension.VUEJS_DEVTOOLS)
      .then((name) => mainWindow.webContents.openDevTools())
      .catch((err) => console.log('An error occurred: ', err))
  }

  mainWindow.on('closed', () => {
    mainWindow = null
  })

  console.log('mainWindow opened')
}

mainWindow.webContents.once("dom-ready", () => {
        // In development install extensions
        if (process.env.MH_ENV === "development") {
            console.log("Development mode. Adding dev-tools.");

            const Installer = require("electron-devtools-installer");

            Promise.all([
                Installer.default(Installer.REACT_DEVELOPER_TOOLS),
                Installer.default(Installer.REDUX_DEVTOOLS)
            ]).catch(err => {
                console.log(`DevTools: ${err}`);
            });
        }
    });
}