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
+19-70Lines changed: 19 additions & 70 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ 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
-
## Accessing the Dev Menu
8
+
## Opening the Dev Menu
9
9
10
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:
11
11
@@ -14,97 +14,46 @@ React Native provides an in-app developer menu which offers several debugging op
14
14
15
15
Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
16
16
17
-
17
+
18
18
19
19
:::note
20
20
The Dev Menu is disabled in release (production) builds.
21
21
:::
22
22
23
-
## Opening the Debugger
23
+
## Opening DevTools
24
24
25
-
The debugger allows you to understand and debug how your JavaScript code is running, similar to a web browser.
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.
26
26
27
-
:::info
28
-
**In Expo projects**, press <kbd>j</kbd> in the CLI to directly open the Hermes Debugger.
Hermes supports the Chrome debugger by implementing the Chrome DevTools Protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a physical device.
35
-
36
-
1. In a Chrome browser window, navigate to `chrome://inspect`.
37
-
2. Use the "Configure..." button to add the dev server address (typically `localhost:8081`).
38
-
3. You should now see a "Hermes React Native" target with an **"inspect"** link. Click this to open the debugger.
39
-
40
-
41
-
42
-
</TabItem>
43
-
<TabItemvalue="flipper">
44
-
45
-
[Flipper](https://fbflipper.com/) is a native debugging tool which provides JavaScript debugging capabilities for React Native via an embedded Chrome DevTools panel.
46
-
47
-
To debug JavaScript code in Flipper, select **"Open Debugger"** from the Dev Menu. Learn more about Flipper [here](https://fbflipper.com/docs/features/react-native/).
48
-
49
-
:::info
50
-
To debug using Flipper, the Flipper app must be [installed on your system](https://fbflipper.com/docs/getting-started/).
51
-
:::
52
-
53
-
27
+
To open DevTools, either:
54
28
55
-
:::warning
56
-
Debugging React Native apps with Flipper is [deprecated in React Native 0.73](https://github.com/react-native-community/discussions-and-proposals/pull/641). We will eventually remove out-of-the box support for JS debugging via Flipper.
57
-
:::
58
-
59
-
:::tip
29
+
- Select "Open DevTools" in the Dev Menu.
30
+
- Press <kbd>j</kbd> from the CLI (`npx react-native start`).
60
31
61
-
#### Alternative debugging tools
32
+
On first launch, DevTools will open to a welcome panel, along with an open console drawer where you can view logs and interact with the JavaScript runtime. From the top of the window, you can navigate to other panels, including the integrated React Components Inspector and Profiler.
62
33
63
-
As React Native transitions away from Flipper, we recommend other existing methods, including first party IDEs, to inspect your application's native code and behaviour.
34
+
64
35
65
-
-[Debugging Native Code](./debugging-native-code)
66
-
- <ahref="https://shift.infinite.red/why-you-dont-need-flipper-in-your-react-native-app-and-how-to-get-by-without-it-3af461955109"target="_blank">Why you don’t need Flipper in your React Native app … and how to get by without it ↗</a>
67
-
68
-
:::
36
+
React Native DevTools is powered by a dedicated debugging architecture built into React Native and uses a customized build of the [Chrome DevTools](https://developer.chrome.com/docs/devtools) frontend. This enables us to offer familiar, browser-aligned debugging features that are deeply integrated and built for end-to-end reliability.
69
37
70
-
</TabItem>
71
-
<TabItemvalue="new-debugger">
38
+
Learn more in our [React Native DevTools guide](./react-native-devtools).
72
39
73
40
:::note
74
-
**This is an experimental feature** and several features may not work reliably today. When this feature does launch in future, we intend for it to work more completely than the current debugging methods.
41
+
React Native DevTools is only available with the Hermes engine, and requires either Google Chrome or Microsoft Edge installed.
75
42
:::
76
43
77
-
The React Native team is working on a new JavaScript debugger experience, intended to replace Flipper, with a preview available as of React Native 0.73.
78
-
79
-
The new debugger can be enabled via React Native CLI. This will also enable <kbd>j</kbd> to debug.
80
-
81
-
```sh
82
-
npx react-native start --experimental-debugger
83
-
```
84
-
85
-
When selecting **"Open Debugger"** in the Dev Menu, this will launch the new debugger using Google Chrome or Microsoft Edge.
86
-
87
-
88
-
89
-
</TabItem>
90
-
</Tabs>
91
-
92
-
## React DevTools
44
+
:::info
93
45
94
-
You can use React DevTools to inspect the React element tree, props, and state.
46
+
#### Flipper and alternative debugging tools
95
47
96
-
```sh
97
-
npx react-devtools
98
-
```
48
+
React Native DevTools replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends. If you are on an older version of React Native, please go to the docs [for your version](/versions).
We continue to offer legacy debugging methods such as Direct JSC Debugging and Remote JS Debugging (deprecated) (see [Other Debugging Methods](./other-debugging-methods)).
101
51
102
-
:::tip
52
+
React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Xcode and Android Studio (see [Debugging Native Code](http://localhost:3000/docs/next/debugging-native-code)).
103
53
104
-
#### Learn how to use React DevTools!
54
+
Other useful links:
105
55
106
-
-[React DevTools guide](./react-devtools)
107
-
-[React Developer Tools on react.dev](https://react.dev/learn/react-developer-tools)
56
+
- <ahref="https://shift.infinite.red/why-you-dont-need-flipper-in-your-react-native-app-and-how-to-get-by-without-it-3af461955109"target="_blank">Why you don’t need Flipper in your React Native app … and how to get by without it ↗</a>
Copy file name to clipboardExpand all lines: docs/other-debugging-methods.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: Other Debugging Methods
5
5
6
6
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
7
7
8
-
This page covers other JavaScript debugging methods besides what is described in [Opening the Debugger](./debugging#opening-the-debugger). If you are using a newly created React Native or Expo app, we recommend starting there.
8
+
This page covers how to use legacy JavaScript debugging methods. If you are getting started with a new React Native or Expo app, we recommend using [React Native DevTools](./react-native-devtools).
9
9
10
10
## Safari Developer Tools (direct JSC debugging)
11
11
@@ -60,7 +60,7 @@ The Console and Sources panels will allow you to inspect your React Native code.
60
60
61
61
62
62
:::info
63
-
Under Remote JavaScript Debugging, the web version of React DevTools in Chrome will not work with React Native. See the [React DevTools](./react-devtools) guide to learn how to use the standalone version of React DevTools.
63
+
Under Remote JavaScript Debugging, the web version of React DevTools in Chrome will not work with React Native. See the [React Native DevTools](./react-native-devtools) guide to explore how to use React DevTools in our integrated debugger.
Copy file name to clipboardExpand all lines: docs/performance.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ This guide is intended to teach you some basics to help you to [troubleshoot per
11
11
12
12
Your grandparents' generation called movies ["moving pictures"](https://www.youtube.com/watch?v=F1i40rnpOsA) for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display at least 60 frames per second, which gives you and the UI system at most 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted time slot, then you will "drop a frame" and the UI will appear unresponsive.
13
13
14
-
Now to confuse the matter a little bit, open up the [Dev Menu](debugging.md#accessing-the-dev-menu) in your app and toggle `Show Perf Monitor`. You will notice that there are two different frame rates.
14
+
Now to confuse the matter a little bit, open up the [Dev Menu](debugging.md#opening-the-dev-menu) in your app and toggle `Show Perf Monitor`. You will notice that there are two different frame rates.
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
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 integrated and fundamentally more reliable than previous debugging methods in React Native.
9
+
10
+
11
+
12
+
React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Android Studio and Xcode (see [Debugging Native Code](http://localhost:3000/docs/next/debugging-native-code)).
13
+
14
+
<details>
15
+
<summary>**💡 Compatibility** — released in 0.76</summary>
16
+
17
+
React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.
18
+
19
+
It is not possible to set up React Native DevTools with any older versions of React Native.
20
+
21
+
-**Chrome Browser DevTools — unsupported**
22
+
- Connecting to React Native via `chrome://inspect` is no longer supported. Features may not work correctly, as the latest versions of Chrome DevTools (which are built to match the latest browser capabilities and APIs) have not been tested, and this frontend lacks our customisations. Instead, we ship a supported version with React Native DevTools.
23
+
-**Visual Studio Code — unsupported** (pre-existing)
24
+
- Third party extensions such as [Expo Tools](https://github.com/expo/vscode-expo) and [Radon IDE](https://ide.swmansion.com/) may have improved compatibility, but are not directly supported by the React team.
25
+
26
+
</details>
27
+
<details>
28
+
<summary>**💡 Feedback & FAQs**</summary>
29
+
30
+
We want the tooling you use to debug React across all platforms to be reliable, familiar, simple, and cohesive. All the features described on this page are built with these principles in mind, and we also want to offer more capabilities in future.
31
+
32
+
We are actively iterating on the future of React Native DevTools, and have created a centralized [GitHub discussion](https://github.com/react-native-community/discussions-and-proposals/discussions/819) to keep track of issues, frequently asked questions, and feedback.
33
+
34
+
</details>
35
+
36
+
## Core features
37
+
38
+
React Native DevTools is based on the Chrome DevTools frontend. If you have a web development background, its features should be familiar. As a starting point, we recommend browsing the [Chrome DevTools docs](https://developer.chrome.com/docs/devtools) which contain full guides as well as video resources.
39
+
40
+
### Console
41
+
42
+
43
+
44
+
The Console panel allows you to view and filter messages, evaluate JavaScript, inspect object properties, and more.
45
+
46
+
[Console features reference | Chrome DevTools](https://developer.chrome.com/docs/devtools/console/reference)
47
+
48
+
#### Useful tips
49
+
50
+
- If your app has a lot of logs, use the filter box or change the log levels that are shown.
51
+
- Watch values over time with [Live Expressions](https://developer.chrome.com/docs/devtools/console/live-expressions).
52
+
- Persist messages across reloads with [Preserve Logs](https://developer.chrome.com/docs/devtools/console/reference#persist).
53
+
- Use <kbd>Ctrl</kbd> + <kbd>L</kbd> to clear the console view.
54
+
55
+
### Sources & breakpoints
56
+
57
+
58
+
59
+
The Sources panel allows you to view the source files in your app and register breakpoints. Use a breakpoint to define a line of code where your app should pause — allowing you to inspect the live state of the program and incrementally step through code.
60
+
61
+
[Pause your code with breakpoints | Chrome DevTools](https://developer.chrome.com/docs/devtools/javascript/breakpoints)
62
+
63
+
:::tip
64
+
65
+
#### Mini-guide
66
+
67
+
Breakpoints are a fundamental tool in your debugging toolkit!
68
+
69
+
1. Navigate to a source file using the sidebar or <kbd>Cmd ⌘</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>P</kbd>.
70
+
2. Click in the line number column next to a line of code to add a breakpoint.
71
+
3. Use the navigation controls at the top right to [step through code](https://developer.chrome.com/docs/devtools/javascript/reference#stepping) when paused.
72
+
73
+
:::
74
+
75
+
#### Useful tips
76
+
77
+
- A "Paused in Debugger" overlay will appear when your app is paused. Tap it to resume.
78
+
- Pay attention to the right hand side panels when on a breakpoint, which allow you to inspect the current scope and call stack, and set watch expressions.
79
+
- Use a `debugger;` statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
80
+
- There are multiple kinds of breakpoints! For example, [Conditional Breakpoints and Logpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview).
81
+
82
+
## Reconnecting DevTools
83
+
84
+
Occasionally, DevTools might disconnect from the target device. This can happen if:
85
+
86
+
- The app is closed.
87
+
- The app is rebuilt (a new native build is installed).
88
+
- The app has crashed on the native side.
89
+
- The dev server (Metro) is quit.
90
+
- A physical device is disconnected.
91
+
92
+
On disconnect, a dialog will be shown with the message "Debugging connection was closed".
93
+
94
+
95
+
96
+
From here, you can either:
97
+
98
+
-**Dismiss**: Select the close (`×`) icon or click outside the dialog to return to the DevTools UI in the last state before disconnection.
99
+
-**Reconnect**: Select "Reconnect DevTools", having addressed the reason for disconnection.
0 commit comments