Correct link for troubleshooting react-dev-tools (#16690) (#16708)
* Correct link for troubleshooting react-dev-tools (#16690) As pointed out in #16690 - the link for 'React Tab Doesn't Show Up' points to the empty README.MD. This points it to that section in the v3 version README.MD - until an updated section will be added to the new dev-tools. * Add a "The React Tab Doesn't Show Up" section Add the troubleshooting section to the react dev tools readme * point to the correct section in react-dev-tools readme After adding the troubleshooting section to the readme - this will point to the correct place * Moved README file to GitHub * Update new issue link to include DevTools label
Liad Yosef committed
Sep 10, 2019 at 23:14 UTC
c317fc273b6fbe03e30971f7dd5690e540f6a029
2 files changed
+20
-2
packages/react-devtools-extensions/popups/disabled.html
+1
-1
@@ -17,5 +17,5 @@
17
<p>
18
<b>This page doesn’t appear to be using React.</b>
19
<br />
20
- If this seems wrong, follow the <a href="https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up">troubleshooting instructions</a>.
20
+ If this seems wrong, follow the <a href="https://github.com/facebook/react/tree/master/packages/react-devtools#the-react-tab-doesnt-show-up">troubleshooting instructions</a>.
21
</p>
packages/react-devtools/README.md
+19
-1
@@ -91,9 +91,27 @@ This will ensure the developer tools are connected. **Don’t forget to remove i
91
92
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.
93
94
+## FAQ
95
+
96
+### The React Tab Doesn't Show Up
97
+
98
+**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:
99
+
100
+
101
+
102
+Or you could develop with a local HTTP server [like `serve`](https://www.npmjs.com/package/serve).
103
+
104
+**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/).
105
+
106
+**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.
107
+
108
+**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.
109
+
110
+**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.
111
+
112
## Development
113
114
* Run `yarn start:backend` and `yarn start:standalone` in `../react-devtools-core`
115
* Run `yarn start` in this folder
116
* Refresh the app after it has recompiled a change
99
-* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.
\ No newline at end of file
117
+* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.