👨🏼‍💻 Use React Dev Tools in Electron

• 2 min read

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

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

×

Recommended Posts ✍🏻

See All »
• 3 min read
✨ HTML Share Buttons
Read Post »
• 8 min read
🚜 A Simple Web Scraper in Go
Read Post »
• 2 min read
👨🏼‍💻 Going Indie, Again
Read Post »