反應開發工具未在 Chrome 瀏覽器中加載

Question

我正在調試一個使用 React.js 的應用程序，Chrome 擴展列表清楚地顯示已安裝 React 開發人員工具，當我訪問http://facebook.github.io/react/的 React 站點時，我可以清楚地看到開發人員工具窗口中的“React”選項卡。 然而，當我調試我的應用程序時，我在控制台中看到了這個：

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

有人能告訴我如何讓它使用 React 開發者工具嗎？

謝謝！

Answer 1

如果您在瀏覽器中打開了本地 html 文件 (file://...)，那么您必須首先打開 chrome 擴展並選中“允許訪問文件 URL”。

Answer 2

你不再需要做任何事情。

---

對於較舊的 react 版本，主要要求是設置了 window.React。 如果您使用的是模塊系統：

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

這通常應該在您的主源文件中完成。

Answer 3

即使 React 開發工具已安裝並在當前頁面上運行，該消息也會始終顯示。 這將在 0.12 中修復（並且已經在 master 中修復）。 請參閱https://github.com/facebook/react/pull/953 。

Answer 4

如果您處於隱身模式，React 工具也將無法工作。 可能會幫助某人。

Answer 5

如果你在本地運行 react app 你必須

1. 安裝“react-devtools”（在本地運行時，bcz chrome不會推斷它是一個React App）

   npm install -g react-devtools

2. 並將“React Developer Tools”擴展添加到 chrome

Answer 6

如果您使用的是 Webpack，請確保您的 webpack.config.js 文件不會阻止插件初始化。 我的 webpack 腳本有這一行：

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

我刪除了它，我的 React 開發工具又可以工作了。