CODEWITHSUNDEEP
javascriptgoogle-chromereactjs
James Fremen
James Fremen

Reputation: 2290

react dev tools not loading in Chrome browser

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!

Upvotes: 62

Views: 57073

Answers (7)

Gonçalo Peres
Gonçalo Peres

Reputation: 13582

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.

Upvotes: 12

Jordi
Jordi

Reputation: 1

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.

Upvotes: 0

Usha Mathivanan
Usha Mathivanan

Reputation: 31

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

Upvotes: 3

Ben
Ben

Reputation: 2045

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

Upvotes: 4

Curtis Yallop
Curtis Yallop

Reputation: 7309

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

Upvotes: 120

Brigand
Brigand

Reputation: 86220

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.

Upvotes: 27

Michelle Tilley
Michelle Tilley

Reputation: 159095

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.

Upvotes: 3

Related Questions