👨🏼‍💻 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 »
• 6 min read • 80 votes
👆🏻 Creating a Pure CSS Dropdown Using the :hove...
Read Post »
• 4 min read • 1545 votes
💻 Wait for User to Stop Typing, in JavaScript
Read Post »
• 4 min read • 3814 votes
😈 Productive Procrastination
Read Post »
• 3 min read • 246 votes
✨ HTML Share Buttons
Read Post »
• 8 min read • 339 votes
🚜 A Simple Web Scraper in Go
Read Post »
• 6 min read • 86 votes
👔 Quit With Positivity
Read Post »
• 5 min read • 404 votes
🚀 Getting Over the Fear of Launching
Read Post »

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