[docs] Extend docs for React Native DevTools (#4410)

docs/debugging.md

@@ -5,21 +5,21 @@ title: Debugging Basics
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
+:::note
+Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds.
+:::
+
 ## Opening the Dev Menu
 
-React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
+React Native provides an in-app developer menu providing access to debugging features. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
 
 - iOS Simulator: <kbd>Ctrl</kbd> + <kbd>Cmd ⌘</kbd> + <kbd>Z</kbd> (or Device > Shake)
 - Android emulators: <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows and Linux)
 
-Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
+Alternative (Android): `adb shell input keyevent 82`.
 
 ![The React Native Dev Menu](/docs/assets/debugging-dev-menu-076.jpg)
 
-:::note
-The Dev Menu is disabled in release (production) builds.
-:::
-
 ## Opening DevTools
 
 [React Native DevTools](./react-native-devtools) is our built-in debugger for React Native. It allows you to inspect and understand how your JavaScript code is running, similar to a web browser.
@@ -63,10 +63,6 @@ LogBox is an in-app tool that displays when warnings or errors are logged by you
 
 ![A LogBox warning and an expanded LogBox syntax error](/docs/assets/debugging-logbox-076.jpg)
 
-:::note
-LogBox is disabled in release (production) builds.
-:::
-
 ### Fatal Errors
 
 When an unrecoverable error occurs, such as a JavaScript syntax error, LogBox will open with the location of the error. In this state, LogBox is not dismissable since your code cannot be executed. LogBox will automatically dismiss once the syntax error is fixed — either via Fast Refresh or after a manual reload.

docs/react-native-devtools.md

@@ -5,7 +5,7 @@ title: React Native DevTools
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-React Native DevTools is our new debugging experience featuring an end-to-end rewrite of our debugger stack. It aims to be more deeply integrated and fundamentally more reliable than previous debugging methods in React Native.
+React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods.
 
 ![React Native DevTools opened to the "Welcome" pane](/docs/assets/debugging-rndt-welcome.jpg)
 
@@ -79,6 +79,57 @@ Breakpoints are a fundamental tool in your debugging toolkit!
 - Use a `debugger;` statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
 - There are multiple kinds of breakpoints! For example, [Conditional Breakpoints and Logpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview).
 
+### Memory
+
+![Inspecting a heap snapshot in the Memory panel](/docs/assets/debugging-rndt-memory.jpg)
+
+The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.
+
+[Record heap snapshots | Chrome DevTools](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots)
+
+#### Useful tips
+
+- Use <kbd>Cmd ⌘</kbd>+<kbd>F</kbd> / <kbd>Ctrl</kbd>+<kbd>F</kbd> to filter for specific objects in the heap.
+- Taking an [allocation timeline report](https://developer.chrome.com/docs/devtools/memory-problems/allocation-profiler) can be useful to see memory usage over time as a graph, to identify possible memory leaks.
+
+## React DevTools features
+
+In the integrated Components and Profiler panels, you'll find all the features of the [React DevTools](https://react.dev/learn/react-developer-tools) browser extension. These work seamlessly in React Native DevTools.
+
+### React Components
+
+![Selecting and locating elements using the React Components panel](/docs/assets/debugging-rndt-react-components.gif)
+
+The React Components panel allows you to inspect and update the rendered React component tree.
+
+- Hover or select an element in DevTools to highlight it on device.
+- To locate an element in DevTools, click the top-left "Select element" button, then tap any element in the app.
+
+#### Useful tips
+
+- Props and state on a component can be viewed and modified at runtime using the right hand panel.
+- Components optimized with [React Compiler](https://react.dev/learn/react-compiler) will be annotated with a "Memo ✨" badge.
+
+:::tip
+
+#### Protip: Highlight re-renders
+
+Re-renders can be a significant contributor to performance issues in React apps. DevTools can highlight component re-renders as they happen.
+
+- To enable, click the View Settings (`⚙︎`) icon and check "Highlight updates when components render".
+
+![Location of the "highlight updates" setting, next to a recording of the live render overlay](/docs/assets/debugging-rndt-highlight-renders.gif)
+
+:::
+
+### React Profiler
+
+![A profile rendered as a flame graph](/docs/assets/debugging-rndt-react-profiler.jpg)
+
+The React Profiler panel allows you to record performance profiles to understand the timing of component renders and React commits.
+
+For more info, see the [original 2018 guide](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#reading-performance-data) (note that parts of this may be outdated).
+
 ## Reconnecting DevTools
 
 Occasionally, DevTools might disconnect from the target device. This can happen if:

website/versioned_docs/version-0.76/debugging.md

@@ -5,21 +5,21 @@ title: Debugging Basics
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
+:::note
+Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds.
+:::
+
 ## Opening the Dev Menu
 
-React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
+React Native provides an in-app developer menu providing access to debugging features. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
 
-- iOS Simulator: <kbd>Cmd ⌘</kbd> + <kbd>D</kbd> (or Device > Shake)
+- iOS Simulator: <kbd>Ctrl</kbd> + <kbd>Cmd ⌘</kbd> + <kbd>Z</kbd> (or Device > Shake)
 - Android emulators: <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows and Linux)
 
-Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
+Alternative (Android): `adb shell input keyevent 82`.
 
 ![The React Native Dev Menu](/docs/assets/debugging-dev-menu-076.jpg)
 
-:::note
-The Dev Menu is disabled in release (production) builds.
-:::
-
 ## Opening DevTools
 
 [React Native DevTools](./react-native-devtools) is our built-in debugger for React Native. It allows you to inspect and understand how your JavaScript code is running, similar to a web browser.
@@ -63,10 +63,6 @@ LogBox is an in-app tool that displays when warnings or errors are logged by you
 
 ![A LogBox warning and an expanded LogBox syntax error](/docs/assets/debugging-logbox-076.jpg)
 
-:::note
-LogBox is disabled in release (production) builds.
-:::
-
 ### Fatal Errors
 
 When an unrecoverable error occurs, such as a JavaScript syntax error, LogBox will open with the location of the error. In this state, LogBox is not dismissable since your code cannot be executed. LogBox will automatically dismiss once the syntax error is fixed — either via Fast Refresh or after a manual reload.

website/versioned_docs/version-0.76/react-native-devtools.md

@@ -79,6 +79,57 @@ Breakpoints are a fundamental tool in your debugging toolkit!
 - Use a `debugger;` statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
 - There are multiple kinds of breakpoints! For example, [Conditional Breakpoints and Logpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview).
 
+### Memory
+
+![Inspecting a heap snapshot in the Memory panel](/docs/assets/debugging-rndt-memory.jpg)
+
+The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.
+
+[Record heap snapshots | Chrome DevTools](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots)
+
+#### Useful tips
+
+- Use <kbd>Cmd ⌘</kbd>+<kbd>F</kbd> / <kbd>Ctrl</kbd>+<kbd>F</kbd> to filter for specific objects in the heap.
+- Taking an [allocation timeline report](https://developer.chrome.com/docs/devtools/memory-problems/allocation-profiler) can be useful to see memory usage over time as a graph, to identify possible memory leaks.
+
+## React DevTools features
+
+In the integrated Components and Profiler panels, you'll find all the features of the [React DevTools](https://react.dev/learn/react-developer-tools) browser extension. These work seamlessly in React Native DevTools.
+
+### React Components
+
+![Selecting and locating elements using the React Components panel](/docs/assets/debugging-rndt-react-components.gif)
+
+The React Components panel allows you to inspect and update the rendered React component tree.
+
+- Hover or select an element in DevTools to highlight it on device.
+- To locate an element in DevTools, click the top-left "Select element" button, then tap any element in the app.
+
+#### Useful tips
+
+- Props and state on a component can be viewed and modified at runtime using the right hand panel.
+- Components optimized with [React Compiler](https://react.dev/learn/react-compiler) will be annotated with a "Memo ✨" badge.
+
+:::tip
+
+#### Protip: Highlight re-renders
+
+Re-renders can be a significant contributor to performance issues in React apps. DevTools can highlight component re-renders as they happen.
+
+- To enable, click the View Settings (`⚙︎`) icon and check "Highlight updates when components render".
+
+![Location of the "highlight updates" setting, next to a recording of the live render overlay](/docs/assets/debugging-rndt-highlight-renders.gif)
+
+:::
+
+### React Profiler
+
+![A profile rendered as a flame graph](/docs/assets/debugging-rndt-react-profiler.jpg)
+
+The React Profiler panel allows you to record performance profiles to understand the timing of component renders and React commits.
+
+For more info, see the [original 2018 guide](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#reading-performance-data) (note that parts of this may be outdated).
+
 ## Reconnecting DevTools
 
 Occasionally, DevTools might disconnect from the target device. This can happen if: