Skip to content

Commit 2228032

Browse files
committed
Tweak tutorial DevTools instructions
1 parent d2f7153 commit 2228032

7 files changed

Lines changed: 7 additions & 8 deletions

File tree

-21.5 KB
Binary file not shown.
76.5 KB
Loading
463 KB
Loading
-245 KB
Binary file not shown.
Binary file not shown.
10.8 KB
Loading

src/content/learn/tutorial-tic-tac-toe.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -899,21 +899,20 @@ body {
899899
900900
### React Developer Tools {/*react-developer-tools*/}
901901
902-
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.
902+
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.
903903
904-
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.
904+
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:
905905
906-
![Warning shown by CodeSandbox for preview in a new tab](../images/tutorial/codesandbox-preview-warning.png)
906+
![opening in new tab](../images/tutorial/sandbox-new-tab.png)
907907
908-
For this warning by CodeSandbox, you may click "Yes, proceed to preview".
908+
Then, on the preview page, open your browser's DevTools and find the *Components* tab:
909909
910-
On the preview page, open the *Components* tab in your browser Developer Tools.
910+
![components tab](../images/tutorial/components-tab.png)
911911
912-
![React DevTools in CodeSandbox](../images/tutorial/react-developer-tools-on-tictactoe-preview.png)
912+
To inspect a particular component on the screen, use the button in the top left corner of the Components tab:
913913
914-
To inspect a particular component on the screen, use the button in the top left corner of the *Components* tab:
914+
![inspecting with devtools](../images/tutorial/devtools-inspect.gif)
915915
916-
![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif)
917916
918917
## Completing the game {/*completing-the-game*/}
919918

0 commit comments

Comments
 (0)