Skip to content

Commit 8950f06

Browse files
committed
Rewrite React Developer Tools section in tutorial-tic-tac-toe
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.
1 parent 5138e60 commit 8950f06

File tree

4 files changed

+9
-7
lines changed

4 files changed

+9
-7
lines changed
-38.5 KB
Binary file not shown.
21.5 KB
Loading
45.2 KB
Loading

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

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

0 commit comments

Comments
 (0)