Using React DevTools inside Electron

by Samuel Attard

Background

So, you have heard about this great framework called Electron that lets you make beautiful, fluid cross-platform desktop applications with the web tools you know and love. And you're a massive fan of React and you think that pairing them together would be absolutely amazing.

First of all, you are correct! React and Electron is an amazing combination and if you want to try it out for yourself I recommend trying out the Electron and React Boilerplate.

The Problem

When you are making a React based website and you want to debug it, you head over to your Chrome DevTools and look at the "React" tab. It is incredibly useful and most people struggle to debug React applications without it.

It has only been recently however that Electron has supported using React DevTools and the install process is an absolute nightmare as it requires having a local copy of React DevTools which most people are including in their version control. This is a really bad plan as

a) You won't get updates to the DevTools
b) If you want to update the DevTools you have to track the changes in version control
c) You wants to keep a massive DevTools extension in their repository

The Solution

With the problem in mind, I realized what we needed was an easy way to install DevTools extensions from the Chrome WebStore. Preferably it would do the following.

  • Be a single line of code to fetch and install an extension
  • Have built in support for common extensions (React, Angular, Etc.)
  • Simply the long process that you normally have to perform to get DevTools into Electron
  • Work cross platform

And thus, electron-devtools-installer was born. You can see it on GitHub here.

Using electron-devtools-installer to get the React DevTools working is incredibly simple

import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';

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

This process works from both the main and renderer processes so you can install the DevTools whenever you want.

Hopefully you guys find this useful.