Electron - How to add react dev tool

Question

What is the easy way to add react dev tool to electron window? I try add the extension hash

BrowserWindow.addDevToolsExtension('path/to/extension/ade2343nd23k234bdb').15.01

But when the extension update, I had to manually update the string in main.js. I'm looking for a better way.

Answer 1

Here is a Solution for Electron <= 1.2.1 version

1- In your app folder

npm install --save-dev electron-react-devtools

2- Open your electron app, click on (view/toggle developer tools). In the console tab insert the following code and hit enter:

 require('electron-react-devtools').install()

3- Reload/refresh your electron app page and you'll see the react dev tools appear.

4- Done!

---

See screen shots bellow

Answer 2

You can add react devtools directly from your main.js file like this

const installExtensions = async () => {
  const installer = require('electron-devtools-installer')
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS
  const extensions = [
    'REACT_DEVELOPER_TOOLS',
    'REDUX_DEVTOOLS',
    'DEVTRON'
  ]

  return Promise
    .all(extensions.map(name => installer.default(installer[name], forceDownload)))
    .catch(console.log)
}

app.on('ready', async () => {
  if (dev && process.argv.indexOf('--noDevServer') === -1) {
    await installExtensions()
  }
  createWindow()
})

Answer 3

addDevToolsExtension is not an instance method, so you need to call BrowserWindow.addDevToolsExtension('path/to/extension').