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: cndocs/react-native-devtools.md
+46-46Lines changed: 46 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,95 +5,95 @@ title: React Native 开发者工具
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 integrated and fundamentally more reliable than previous debugging methods in React Native.
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](/docs/debugging-native-code)).
It is not possible to set up React Native DevTools with any older versions of React Native.
19
+
无法使用任何旧版本的 React Native 设置 React Native DevTools。
20
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.
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.
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.
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.
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.
[Pause your code with breakpoints | Chrome DevTools](https://developer.chrome.com/docs/devtools/javascript/breakpoints)
62
62
63
63
:::tip
64
64
65
-
#### Mini-guide
65
+
#### 迷你指南
66
66
67
-
Breakpoints are a fundamental tool in your debugging toolkit!
67
+
断点是你的调试工具包中的基本工具!
68
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.
-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).
77
+
-当应用暂停时,会出现一个“暂停在调试器中”的覆盖层。点击它以恢复。
78
+
-注意右侧面板,当在断点时,允许你检查当前范围和调用栈,并设置观察表达式。
79
+
-使用 `debugger;`语句快速从文本编辑器设置断点。这将通过 Fast Refresh 立即到达设备。
0 commit comments