You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/debugging.md
+6-10Lines changed: 6 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,21 +5,21 @@ title: Debugging Basics
5
5
6
6
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
7
7
8
+
:::note
9
+
Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds.
10
+
:::
11
+
8
12
## Opening the Dev Menu
9
13
10
-
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:
14
+
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:
- Android emulators: <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows and Linux)
14
18
15
-
Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
19
+
Alternative (Android): `adb shell input keyevent 82`.
16
20
17
21
18
22
19
-
:::note
20
-
The Dev Menu is disabled in release (production) builds.
21
-
:::
22
-
23
23
## Opening DevTools
24
24
25
25
[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
63
63
64
64
65
65
66
-
:::note
67
-
LogBox is disabled in release (production) builds.
68
-
:::
69
-
70
66
### Fatal Errors
71
67
72
68
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.
Copy file name to clipboardExpand all lines: docs/react-native-devtools.md
+52-1Lines changed: 52 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: React Native DevTools
5
5
6
6
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
7
7
8
-
React Native DevTools is our new debugging experience featuring an end-to-end rewrite of our debugger stack. It aims to be more deeply integratedand fundamentally more reliable than previous debugging methods in React Native.
8
+
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.
9
9
10
10
11
11
@@ -79,6 +79,57 @@ Breakpoints are a fundamental tool in your debugging toolkit!
79
79
- Use a `debugger;` statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
80
80
- There are multiple kinds of breakpoints! For example, [Conditional Breakpoints and Logpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview).
81
81
82
+
### Memory
83
+
84
+
85
+
86
+
The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.
- Use <kbd>Cmd ⌘</kbd>+<kbd>F</kbd> / <kbd>Ctrl</kbd>+<kbd>F</kbd> to filter for specific objects in the heap.
93
+
- 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.
94
+
95
+
## React DevTools features
96
+
97
+
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.
98
+
99
+
### React Components
100
+
101
+
102
+
103
+
The React Components panel allows you to inspect and update the rendered React component tree.
104
+
105
+
- Hover or select an element in DevTools to highlight it on device.
106
+
- To locate an element in DevTools, click the top-left "Select element" button, then tap any element in the app.
107
+
108
+
#### Useful tips
109
+
110
+
- Props and state on a component can be viewed and modified at runtime using the right hand panel.
111
+
- Components optimized with [React Compiler](https://react.dev/learn/react-compiler) will be annotated with a "Memo ✨" badge.
112
+
113
+
:::tip
114
+
115
+
#### Protip: Highlight re-renders
116
+
117
+
Re-renders can be a significant contributor to performance issues in React apps. DevTools can highlight component re-renders as they happen.
118
+
119
+
- To enable, click the View Settings (`⚙︎`) icon and check "Highlight updates when components render".
120
+
121
+
122
+
123
+
:::
124
+
125
+
### React Profiler
126
+
127
+
128
+
129
+
The React Profiler panel allows you to record performance profiles to understand the timing of component renders and React commits.
130
+
131
+
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).
132
+
82
133
## Reconnecting DevTools
83
134
84
135
Occasionally, DevTools might disconnect from the target device. This can happen if:
Copy file name to clipboardExpand all lines: website/versioned_docs/version-0.76/debugging.md
+7-11Lines changed: 7 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,21 +5,21 @@ title: Debugging Basics
5
5
6
6
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
7
7
8
+
:::note
9
+
Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds.
10
+
:::
11
+
8
12
## Opening the Dev Menu
9
13
10
-
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:
14
+
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:
- Android emulators: <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows and Linux)
14
18
15
-
Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
19
+
Alternative (Android): `adb shell input keyevent 82`.
16
20
17
21
18
22
19
-
:::note
20
-
The Dev Menu is disabled in release (production) builds.
21
-
:::
22
-
23
23
## Opening DevTools
24
24
25
25
[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
63
63
64
64
65
65
66
-
:::note
67
-
LogBox is disabled in release (production) builds.
68
-
:::
69
-
70
66
### Fatal Errors
71
67
72
68
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.
Copy file name to clipboardExpand all lines: website/versioned_docs/version-0.76/react-native-devtools.md
+51Lines changed: 51 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -79,6 +79,57 @@ Breakpoints are a fundamental tool in your debugging toolkit!
79
79
- Use a `debugger;` statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
80
80
- There are multiple kinds of breakpoints! For example, [Conditional Breakpoints and Logpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview).
81
81
82
+
### Memory
83
+
84
+
85
+
86
+
The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.
- Use <kbd>Cmd ⌘</kbd>+<kbd>F</kbd> / <kbd>Ctrl</kbd>+<kbd>F</kbd> to filter for specific objects in the heap.
93
+
- 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.
94
+
95
+
## React DevTools features
96
+
97
+
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.
98
+
99
+
### React Components
100
+
101
+
102
+
103
+
The React Components panel allows you to inspect and update the rendered React component tree.
104
+
105
+
- Hover or select an element in DevTools to highlight it on device.
106
+
- To locate an element in DevTools, click the top-left "Select element" button, then tap any element in the app.
107
+
108
+
#### Useful tips
109
+
110
+
- Props and state on a component can be viewed and modified at runtime using the right hand panel.
111
+
- Components optimized with [React Compiler](https://react.dev/learn/react-compiler) will be annotated with a "Memo ✨" badge.
112
+
113
+
:::tip
114
+
115
+
#### Protip: Highlight re-renders
116
+
117
+
Re-renders can be a significant contributor to performance issues in React apps. DevTools can highlight component re-renders as they happen.
118
+
119
+
- To enable, click the View Settings (`⚙︎`) icon and check "Highlight updates when components render".
120
+
121
+
122
+
123
+
:::
124
+
125
+
### React Profiler
126
+
127
+
128
+
129
+
The React Profiler panel allows you to record performance profiles to understand the timing of component renders and React commits.
130
+
131
+
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).
132
+
82
133
## Reconnecting DevTools
83
134
84
135
Occasionally, DevTools might disconnect from the target device. This can happen if:
0 commit comments