Enabling DevTools extensions

I believe that you had no problems when running the last example. Yet, when we need to trace an issue in a React application, it can be tricky, as DevTools shows us what is happening to the real DOM; however, we want to know about the virtual one also. Fortunately, Facebook offers an extension for DevTools called React Developer Tools (http://bit.ly/1dGLkxb).

We will install this extension with electron-devtools-installer (https://www.npmjs.com/package/electron-devtools-installer). This tool supports a number of DevTools extensions including a few React-related: React Developer Tools (REACT_DEVELOPER_TOOLS), Redux DevTools Extension (REDUX_DEVTOOLS), React Perf (REACT_PERF). We will pick only the first one for now.

First we install the package:

npm i -D electron-devtools-installer

Then we add to the main process script the following line:

./app/main.js

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

We imported...