Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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 ("https://yjksdn.csb.app/") and open it in a new browser tab.

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