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.

Tube

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

Snyder

Note that this method only installs the react devtools for the current session; you have to do this every time you launch your application. – Rattlehead

Package got abandoned, here's my take: npmjs.com/package/react-devtools-electron – Prohibition

@Rattlehead you are right. Have you found a way to permanently have access to the tools without re-running this command every time we launch the app? – Gypsy

@DimitarNestorov attempting to install your package gets TypeError: Cannot read property 'isReady' of undefined – Forelady

@Forelady Electron updated the internals a while ago and I haven't had time to fix it. Some people are reporting that they can't get it to work (not using my library) even with the latest version of electron: github.com/electron/electron/issues/23662 – Prohibition

React DevTools can only be installed from an renderer process. i see this when i try to execute require('electron-react-devtools').install() – Parallelepiped

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()
})

Grieco

Answer 3

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

Suffer

Answer 4

Below solution worked for me (https://github.com/MarshallOfSound/electron-devtools-installer#usage) -

npm install electron-devtools-installer --save-dev 
or 
yarn add electron-devtools-installer -D

import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer';
// Or if you can not use ES6 imports
/**
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
*/
const { app } = require('electron');

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

Fortson

i dont see react tab, is there something i am missing? – Poliomyelitis

Did you refresh the site after the electron client had started up? I had to do that in my solution. – Kerman

You're still only using installExtension(REDUX_DEVTOOLS) shouldn't that be installExtension(REACT_DEVELOPER_TOOLS) ? – Dogs

Answer 5

Electron actually has an official guide for how to install DevTools Extensions (e.g. React Development Tools). The guide will link you to the GitHub site of the repository which has a guide for how to proceed. The solution is similar to the answer posted by Chetan Gawai, but I use pnpm and ES6 package imports.

Using pnpm, here is what i did:

1. pnpm install --save-dev electron-devtools-installer
2. Add the following code to your main process:

import installExtension, { REACT_DEVELOPER_TOOLS} from 'electron-devtools-installer';
import { app } from "electron";
...
app.whenReady().then(() => {
   installExtension(REACT_DEVELOPER_TOOLS)
       .then((name) => console.log(`Added Extension:  ${name}`))
       .catch((err) => console.log('An error occurred: ', err));
});

3. After the electron window has started, remember to refresh the site in electron (typically ctrl+r). You may not see the react development tools before you refresh the site (I don't know why a refresh is needed).

   • Developer Tools before refresh (the react development tools are not visible):

   • Developer Tools after refresh (the react development tools are visible):

The GitHub site for the electron-devtools-installer will have a list of different extensions that you can install.

Kerman

It's that refresh that got me. – Dogs

Answer 6

If you see a blank component when launching react-devtools, it's probably because you've installed the package globally as it is recommended in the react-native docs, in the debugging section. What's happening is it doesn't get connected to your app, because it's not your app-specific.

You need to install it locally.

npm install --save-dev react-devtools

or

yarn add -D react-devtools

Tades