Rewrite React Developer Tools section in tutorial-tic-tac-toe to use browser extension #7726
Conversation
CodeSandbox doesn't seem to support any platform React Developer Tools as is seen in tutorial. This section is rewritten to use the browser extension directly on the preview.
|
Hi @vintas! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
|
@hoxyq could you take a look at this? |
| React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React. | ||
|  | ||
| After React Developer Tools installation, you can take the URL present in the _preview_ section of CodeSandbox (similar to "https://***.csb.app/") and open it in a new browser tab. |
There was a problem hiding this comment.
I am not seeing the URL, maybe because something changed on CodeSandbox end. We should probably leave a link to https://yjksdn.csb.app/ here?
There was a problem hiding this comment.
I wrote *** in the URL as a placeholder for the codesandbox instance ID that the reader will have in their run which could be any random string.
If there's a better way to phrase that the reader needs to use the URL they see in their forked instance, I can change that. Would an image with the URL section highlighted help illustrate it better?
There was a problem hiding this comment.
Is this identifier generated dynamically? Can we fork this example and generate a stable link to it? There has to be a way to do it in CodeSandbox, I think.
There was a problem hiding this comment.
I have pushed a change with the URL now fixed to the codesandbox instance that is mentioned just before this section being edited.
4 participants
CodeSandbox doesn't seem to support any platform React Developer Tools as is seen in tutorial. This section is rewritten to use the browser extension directly on the preview.
Closes #7706