👨🏼‍💻 Use React Dev Tools in Electron

• 2 min read • 1 votes

I recently set up React Dev Tools inside an Electron app, so I thought I’d write a small tutorial on it. The whole process should take less than five minutes so let’s get started.

Step 1 – Install React Dev Tools Chrome Extension

Before we can use React Dev Tools in Electron, we need a copy of it. To do that, install it from the Chrome Web Store

Step 2 – Locate the Extension Files

Chrome puts all extension files under the extension’s ID. Get a copy of the ID by finding the extension on chrome://extensions.

React dev tools Chrome extension

The ID should look something like fmkadmapgofadopljbjfkapdkoienihi.

Next, open your terminal and find the version of the extension that is installed.

Note: The path will be different on non-Mac platforms

# Should print something like `0.15.0_0`
ls ~/Library/Application\ Support/Google/Chrome/\

This path, plus the version, is what we’ll give to Electron.

Step 3 – Tell Electron to Load the Extension

Now all we have to do is tell Electron to load the extension. Be sure to only load the extension in your development workflow.

if (process.env.NODE_ENV === 'development') {
  // Make sure you have the FULL path here or it won't work
    '/Users/gschier/Library/Application Support/Google/Chrome/' +


That’s it! You now have the React dev tools available within your app. Here’s what it should look like.

TIP: You can drag the tabs in the dev tools with your mouse. I put React on the left.

React dev tools in Electron

If you enjoyed this tutorial, please consider sponsoring my work on GitHub 🤗

Now look what you've done 🌋
Stop clicking and run for your life! 😱
Uh oh, I don't think the system can't handle it! 🔥
Stop it, you're too kind 😄
Thanks for the love! ❤️
Thanks, glad you enjoyed it! Care to share?
Hacker News Reddit

More Posts ✍🏻

See All »
• 2 min read • 697 votes
🗓 2019 Year in Review: Prioritizing Health
Read Post »
• 4 min read • 4169 votes
😈 Productive Procrastination
Read Post »
• 6 min read • 388 votes
👔 Quit With Positivity
Read Post »
• 6 min read • 366 votes
🎈 Abandoning the Static Site
Read Post »
• 5 min read • 532 votes
🚀 Getting Over the Fear of Launching
Read Post »
• 3 min read • 402 votes
📈 Indie to Acquisition
Read Post »
• 3 min read • 278 votes
🌁 Unlimited Potential
Read Post »

Be the first to hear about posts, right in your inbox 💌