JavaScript React Basics (retired) First Steps in React React Developer Tools

No React tab in Developer Tools

React tab is no longer loading in developer tools. I tried...

Am I missing something?

Hey, Sorry, but I don't use react, So I can't help you. I'm sure there are several people on the forum who can help.

Seth Kroger
Seth Kroger
56,371 Points

This is with opening DevTools on a page using React, correct? It was updated a while ago the tab won't show if React isn't present.

Hello, I noticed React tab is back and came here to remove question. But then there are comments from awesome folks at Treehouse community, so I will leave a comment instead. I think Seth Kroger has it right. Although I can't figure out why React tab did not appear for same* React-projects earlier...maybe my system just needed a few days to catch up somehow? Well, anyways, it is back, so thank goodness, and thanks everyone!

Cole Logan
Cole Logan
4,582 Points

I had the same problem but I fixed it. I removed the chrome tab that I was serving my react project on and I just re-served the project and the tab showed up.

4 Answers

Jose Esplana
Jose Esplana
12,064 Points

Type this in your browser -> chrome://extensions/ OR you can go to MoreTools -> Extensions

look for -> React Developer Tools 2.5.0 extension

then check -> "Allow access to file URLs"

Refresh your browser

here's the link

FAQ

The React Tab Doesn't Show Up

https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up

Awesome. Thanks, this method worked

From stack overflow: http://stackoverflow.com/questions/26347489/react-dev-tools-not-loading-in-chrome-browser

"For older react versions, the main requirement is that window.React is set. If you're using a module system:"

I just added the below code to app.jsx and the tab appeared.

if (typeof window !== 'undefined') { window.React = React; }

Sanjeev Veloo
Sanjeev Veloo
4,713 Points

I had that same problem. I shut down Chrome and started again and it worked?

Gustavo Winter
PRO
Gustavo Winter
Pro Student 27,382 Points

Hey, try use the Facebook page to test if react is working.

The developer tools only works if the page are using react.

Like this page at teamtreehouse website. " This page doesn’t appear to be using React. If this seems wrong, follow the troubleshooting instructions."

But, if you try the same on Facebook webSite "This page is using the production build of React. ✅ Open the developer tools, and the React tab will appear to the right."

You can see the icon of React Developers tools at the side of the settings button of chrome.