Skip to content

Commit

Permalink
Correct link for troubleshooting react-dev-tools (#16690) (#16708)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
liady authored and bvaughn committed Sep 10, 2019
1 parent 41a78cd commit c317fc2
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/react-devtools-extensions/popups/disabled.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
<p>
<b>This page doesn&rsquo;t appear to be using React.</b>
<br />
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>.
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>.
</p>
20 changes: 19 additions & 1 deletion packages/react-devtools/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.

0 comments on commit c317fc2

Please sign in to comment.