Skip to content

Rewrite React Developer Tools section in tutorial-tic-tac-toe to use browser extension #7726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+9 −7
Open

Rewrite React Developer Tools section in tutorial-tic-tac-toe to use browser extension #7726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed public/images/tutorial/codesandbox-devtools.png
View file
Open in desktop
Binary file not shown.
Binary file added public/images/tutorial/codesandbox-preview-warning.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/tutorial/react-developer-tools-on-tictactoe-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 9 additions & 7 deletions src/content/learn/tutorial-tic-tac-toe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -899,19 +899,21 @@ body {

### React Developer Tools {/*react-developer-tools*/}

React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox:
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.

![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Author

@vintas vintas May 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

cc @rickhanlonii


To inspect a particular component on the screen, use the button in the top left corner of React DevTools:
![Warning shown by CodeSandbox for preview in a new tab](../images/tutorial/codesandbox-preview-warning.png)

![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
For this warning by CodeSandbox, you may click "Yes, proceed to preview".

<Note>
On the preview page, open the *Components* tab in your browser Developer Tools.

For local development, React DevTools 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.
![React DevTools in CodeSandbox](../images/tutorial/react-developer-tools-on-tictactoe-preview.png)

</Note>
To inspect a particular component on the screen, use the button in the top left corner of the *Components* tab:

![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)

## Completing the game {/*completing-the-game*/}

Expand Down