Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Grace Nellore
Grace Nellore
9,447 Points

No React tab in Developer Tools

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

Am I missing something?

Jacob Mishkin
Jacob Mishkin
23,118 Points

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,416 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.

Grace Nellore
Grace Nellore
9,447 Points

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,503 Points
Jose Esplana
Jose Esplana
12,503 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

gevuong
gevuong
2,377 Points

Awesome. Thanks, this method worked

johnhunter
johnhunter
12,964 Points
johnhunter
johnhunter
12,964 Points

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
Sanjeev Veloo
Sanjeev Veloo
4,713 Points

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

Gustavo Winter
PLUS
Gustavo Winter
Courses Plus Student 27,382 Points
Gustavo Winter
Gustavo Winter
Courses Plus 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.