60

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!

James Fremen
  • 2,170
  • 2
  • 20
  • 29

7 Answers7

119

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".

Curtis Yallop
  • 6,696
  • 3
  • 46
  • 36
  • I am on linux mint 64 bit, followed above instructions and my Allow access to file URLs was checked off, I turned it on and then my React tab appeared. Marking this one correct for me since pointed me in right direction, I just did the opposite and it worked for me. – JMStudios.jrichardson Aug 01 '15 at 16:47
  • 3
    This works on latest ReactJs version 0.13.3. So, after you ticked `Allow access to file URLs` option. You also need to close the tab and re-opened the tab again (or restart chrome if you want bother reopening all of your current tabs again). – rhzs Aug 26 '15 at 19:13
  • This fixes the error, but doesn't make the React tab actually show up; that requires a webserver: https://github.com/facebook/react-devtools/issues/172 – Kevin Ghadyani Dec 15 '15 at 19:26
  • Using webpack-dev-server it failed to appear when visiting `localhost:8080/webpack-dev-server/`. But if I visit just `localhost:8080` it does appear. Something with the iframe I suppose. I'ma post a comment on the aforementioned github issue thread. – jinglesthula Dec 21 '16 at 07:26
27

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.

Brigand
  • 84,529
  • 20
  • 165
  • 173
  • thanks! That got the React tab to appear. I embellished it a little (i'm using Coffeescript): if typeof window isnt "undefined" window.React = React window.onload = -> React.renderComponent App(null), document.getElementById("container") return – James Fremen Oct 18 '14 at 14:44
  • What exactly does this statement do? My interpretation is: `typeof window !== "undefined" && (window.React = React)` boils down to (assuming React is loaded): `typeof true && true` which is `typeof true`. Which is `boolean`. http://www.w3schools.com/js/js_datatypes.asp So wouldn't this be the same as putting the text: `boolean` at the top of my main source file? – Giant Elk Nov 27 '14 at 20:45
  • 1
    It's just used as a short version of an if statement. Every assertion in your comment is incorrect. It could be written verbosely as `if ((typeof window) !== "undefined") window.React = React;`. `typeof` has higher precedence than `!==`, there's an assignment after the &&, and `boolean` would refer to a variable called `boolean`, which would cause a ReferenceError. – Brigand Nov 27 '14 at 22:33
  • @FakeRainBrigand, can you tell very specifically in which file do I need to write the code line ? – Istiaque Ahmed Dec 17 '14 at 14:32
  • 1
    With exactly the same number of characters you can make it much more readable: `if (typeof window !== 'undefined') window.React = React` - or am I missing something else? – evilcelery Jan 15 '15 at 11:21
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.

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
  • 1
    ok.. the React tab isn't appearing when i debug my application so it seems i have to modify my application somehow to get the tools to recognize that react is in use. – James Fremen Oct 18 '14 at 14:28
  • Can you report back if you succeed? I might ask a separate question for this, actually. There are a number of threads open without joy: https://github.com/facebook/react-devtools/issues/91 https://github.com/atom/electron/issues/915 – GreenAsJade Oct 18 '15 at 06:15
3

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

Ben
  • 1,989
  • 22
  • 25
  • 5
    They do work but you have to allow it to run in incognito under chrome://extensions/, like every other extension – ivarni May 11 '17 at 06:35
3

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

Usha Mathivanan
  • 31
  • 2
1

With version 4.27.1 (12/6/2022) the only constraint that I had was the React tabs now showing up in Chrome DevTools. In order to solve that, I've done the following

  1. Open Chrome DevTools

    • With F12

    • Or CTRL + Shift + I

    • Or right click, then select Inspect

    enter image description here

  2. Access Settings>Preference

    • Press the gear icon in the top right corner of the Developer Console

    enter image description here

    • With F1

    • Or Shift + ?

  3. At the bottom, press the button Restore defaults and reload.

    enter image description here

  4. Now both the Profiler and Components tabs should appear (if they don't, consider restarting Chrome)

    enter image description here

Notes:

  • As opposed to what Curtis Yallop mentioned, I didn't have to toggle on the "Allow access to file URLs" for this to work.

  • If one wants the extension to run in Private mode, one will have to give permissions. For that

    1. Access chrome://extensions/

    2. Click Details

    enter image description here

    1. Toggle on the option Allow in Incognito.
Gonçalo Peres
  • 11,752
  • 3
  • 54
  • 83
0

If you are using Webpack, make sure that your webpack.config.js file doesn't prevent the Plugin from initializing. My webpack script had this line:

  plugins: [
    new webpack.DefinePlugin({
        '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
    }),
  ],

I deleted it and my React Dev Tools works again.

Jordi
  • 1