反应开发工具未在 Chrome 浏览器中加载

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!

Answer 1

如果您在浏览器中打开了本地 html 文件 (file://...)，那么您必须首先打开 chrome 扩展并选中“允许访问文件 URL”。

Answer 2

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.

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

Answer 4

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

Answer 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

Answer 6

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.