react dev tools not loading in Chrome browser

Question

I'm debugging an application which uses React.js, the Chrome Extensions list clearly shows that the React Developer Tools are installed, and when i access the React site at http://facebook.github.io/react/ i can clearly see a "React" tab in the developer tools window. Yet when i'm debugging my application i see this in the console:

Download the React DevTools for a better development experience: http://fb.me/react-devtools React.js:87

Can someone tell me how to get it to use the React Developer Tools?

thanks!

Solution 1

You no longer need to do anything.

---

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

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

This should usually be done in your main source file.

Solution 2

If you opened a local html file in your browser (file://...) then you must first open chrome extensions and check off "Allow access to file URLs".

Solution 3

That message always displays, even if the React dev tools are installed and working on the current page. This will be fixed in 0.12 (and is already fixed in master). See https://github.com/facebook/react/pull/953.

Solution 4

React tools also won't work if you're in incognito mode. Might help someone.

Solution 5

If you run react app locally you have to

1. Install "react-devtools" (bcz chrome will not deduct it is a React App when you run in local)

   npm install -g react-devtools

2. And add "React Developer Tools" extension to chrome

View more solutions