diff --git a/packages/react-devtools-extensions/popups/disabled.html b/packages/react-devtools-extensions/popups/disabled.html index a89b178d49cf8..2be9e4fb85a5f 100644 --- a/packages/react-devtools-extensions/popups/disabled.html +++ b/packages/react-devtools-extensions/popups/disabled.html @@ -17,5 +17,5 @@

This page doesn’t appear to be using React.
- If this seems wrong, follow the troubleshooting instructions. + If this seems wrong, follow the troubleshooting instructions.

diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md index f67918a6fa6c4..86d77cbd684a3 100644 --- a/packages/react-devtools/README.md +++ b/packages/react-devtools/README.md @@ -91,9 +91,27 @@ This will ensure the developer tools are connected. **Don’t forget to remove i By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead. +## FAQ + +### The React Tab Doesn't Show Up + +**If you are running your app from a local `file://` URL**, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions: + +![Allow access to file URLs](https://user-images.githubusercontent.com/29597/64646784-95b58080-d3cc-11e9-943d-02474683398a.png) + +Or you could develop with a local HTTP server [like `serve`](https://www.npmjs.com/package/serve). + +**The React tab won't show up if the site doesn't use React**, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named `__REACT_DEVTOOLS_GLOBAL_HOOK__`, then React communicates with that hook during initialization. You can test this on the [React website](http://facebook.github.io/react/) or by inspecting [Facebook](https://www.facebook.com/). + +**If your app is inside of CodePen**, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe. + +**If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment**, try [the standalone version instead](https://github.com/facebook/react/tree/master/packages/react-devtools). Chrome apps are currently not inspectable. + +**If you still have issues** please [report them](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools). Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot. + ## Development * Run `yarn start:backend` and `yarn start:standalone` in `../react-devtools-core` * Run `yarn start` in this folder * Refresh the app after it has recompiled a change -* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes. \ No newline at end of file +* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.