TODO:

1. Add Devtools
2. RactDevtools
3. ReduxDevtools

Currently we have pages that contains HTML/JS/CSS. Lets connect/open Chrome Debug tools:

First of all i will show you how to open Devtools on any page.

Lets add some kind of key-binding to our app to open devtools ( F12 ). We will add this key-binding into our Menu. Do not worry Menu will works even if you hide it ( or hide dock ).

electron-app/js/menuTemplate.js

  ...
  {
    label: 'View',
    submenu: [
      {
        label: 'About App',
        click: function () {
          ipcMain.emit('show-about-window-event')
        }
      },
      {
        label: 'Toggle Developer Tools', accelerator: 'F12',
        click: function (item, focusedWindow) {
          focusedWindow.webContents.toggleDevTools();
        }
      },
      {
        label: 'Reload', accelerator: 'CmdOrCtrl+R',
        click: function (item, focusedWindow) {
          focusedWindow.reload();
        }
      }
    ]
  },
  ...

Now, when F12 key is pressed Chrome devtools will shows up on an active window.

But what should we do when we wont to use React or Redux, how we should add RactDevtools / ReduxDevtools?

To add additional extensions we should install:

npm install electron-devtools-installer --save-dev ( My current version is '2.0.1' )

This npm package will helps us.

package.json

{
  "devDependencies": {
     "electron-devtools-installer": "^2.0.1",
  }
}

Then we should update MainProcess file:

"isDev" - was set in pacakage.json: 'electron': 'NODE_ENV=development electron ./electron-app/js/index.js'

electron-app/js/index.js

const isDev = (process.env.NODE_ENV === 'development');

let installExtension = null;
if ( isDev ) {
  installExtension = require('electron-devtools-installer');
}

...
app.on('ready', function () {
  // If Now is dev env - lets call install extentions function:
  if ( isDev ) installExtentions();
  ...
})
...

// This is some kind of tricky way to install it, but this is caused by npm pacakage. Because this pacakage uses ES6 which we do not use for electron.

const installExtentions = function () {
  // If you use some unusual devtools ext. You should specify his ID here.
  installExtension['default']( installExtension['REDUX_DEVTOOLS'] )
  installExtension['default']( installExtension['REACT_DEVELOPER_TOOLS'] )
}

Also do not forget to specify resizable: true option.

Lets launch: npm run electron

VIDEO: Devtools