diff --git a/public/images/tutorial/codesandbox-preview-warning.png b/public/images/tutorial/codesandbox-preview-warning.png deleted file mode 100644 index 0df31c2552a..00000000000 Binary files a/public/images/tutorial/codesandbox-preview-warning.png and /dev/null differ diff --git a/public/images/tutorial/components-tab.png b/public/images/tutorial/components-tab.png new file mode 100644 index 00000000000..90ce0770ee5 Binary files /dev/null and b/public/images/tutorial/components-tab.png differ diff --git a/public/images/tutorial/devtools-inspect.gif b/public/images/tutorial/devtools-inspect.gif new file mode 100644 index 00000000000..5c623e6a734 Binary files /dev/null and b/public/images/tutorial/devtools-inspect.gif differ diff --git a/public/images/tutorial/devtools-select.gif b/public/images/tutorial/devtools-select.gif deleted file mode 100644 index dd1e1aa61ef..00000000000 Binary files a/public/images/tutorial/devtools-select.gif and /dev/null differ diff --git a/public/images/tutorial/react-developer-tools-on-tictactoe-preview.png b/public/images/tutorial/react-developer-tools-on-tictactoe-preview.png deleted file mode 100644 index 5922a46d7fe..00000000000 Binary files a/public/images/tutorial/react-developer-tools-on-tictactoe-preview.png and /dev/null differ diff --git a/public/images/tutorial/sandbox-new-tab.png b/public/images/tutorial/sandbox-new-tab.png new file mode 100644 index 00000000000..093a363fb95 Binary files /dev/null and b/public/images/tutorial/sandbox-new-tab.png differ diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 0ab0fb26e32..7be70f088dd 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -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*/}