Skip to content
Merged
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 not shown.
Binary file added public/images/tutorial/components-tab.png
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/devtools-inspect.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/tutorial/devtools-select.gif
Binary file not shown.
Binary file not shown.
Binary file added public/images/tutorial/sandbox-new-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 7 additions & 8 deletions src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -899,21 +899,20 @@ body {
### React Developer Tools {/*react-developer-tools*/}
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 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.
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.
After you install it, a new *Components* tab will appear in your browser Developer Tools for sites using React. If you're following along in CodeSandbox, you'd need to first open your sandbox preview in a new tab:
![Warning shown by CodeSandbox for preview in a new tab](../images/tutorial/codesandbox-preview-warning.png)
![opening in new tab](../images/tutorial/sandbox-new-tab.png)
For this warning by CodeSandbox, you may click "Yes, proceed to preview".
Then, on the preview page, open your browser's DevTools and find the *Components* tab:
On the preview page, open the *Components* tab in your browser Developer Tools.
![components tab](../images/tutorial/components-tab.png)
![React DevTools in CodeSandbox](../images/tutorial/react-developer-tools-on-tictactoe-preview.png)
To inspect a particular component on the screen, use the button in the top left corner of the Components tab:
To inspect a particular component on the screen, use the button in the top left corner of the *Components* tab:
![inspecting with devtools](../images/tutorial/devtools-inspect.gif)
![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
## Completing the game {/*completing-the-game*/}
Expand Down
Loading