👨🏼‍💻 Use React Dev Tools in Electron

• 2 min read

This post was last updated Aug 9, 2016 and may be out of date

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/\
Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi

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
  BrowserWindow.addDevToolsExtension(
    '/Users/gschier/Library/Application Support/Google/Chrome/' +
    'default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0'
  );
  
}

Success!

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

Be the first to cheers
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?
HN Reddit

More Posts ✍🏻

See All »
• 4 min read • 3354 votes 🔥
😈 Productive Procrastination
Read Post »
• 5 min read • 310 votes
🚀 Getting Over the Fear of Launching
Read Post »
• 2 min read • 282 votes
🗓 2019 Year in Review: Prioritizing Health
Read Post »
• 6 min read • 137 votes
🎈 Abandoning the Static Site
Read Post »
• 5 min read • 302 votes
👨🏼‍💻 Indie, a Competitive Advantage
Read Post »
• 4 min read • 486 votes
💻 Wait for User to Stop Typing, in JavaScript
Read Post »
• 3 min read • 244 votes
📈 Indie to Acquisition
Read Post »

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