Skip to content

Commit c6562af

Browse files
committed
update
1 parent c2a3857 commit c6562af

File tree

10 files changed

+445
-497
lines changed

10 files changed

+445
-497
lines changed

cndocs/native-platforms.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ title: 桥接原生平台能力
2525
:::
2626

2727
1. Turbo 原生模块
28-
- [Android & iOS](turbo-native-modules.md)
29-
- [跨平台使用 C++](the-new-architecture/pure-cxx-modules.md)
28+
- [Android iOS 的原生模块](turbo-native-modules.md)
29+
- [使用 C++ 实现跨平台的原生模块](the-new-architecture/pure-cxx-modules.md)
3030
- [高级:自定义 C++ 类型](the-new-architecture/custom-cxx-types.md)
3131
2. Fabric 原生组件
32-
- [Android & iOS](fabric-native-components.md)
32+
- [Android iOS 的原生 UI 组件](fabric-native-components.md)

cndocs/react-native-devtools.md

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,95 +5,95 @@ title: React Native 开发者工具
55

66
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
77

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.
8+
React Native DevTools 是我们新的调试体验,它对我们的调试堆栈进行了端到端的重新编写。它旨在比以前的调试方法更深入地集成,并且从根本上更可靠。
99

10-
![React Native DevTools opened to the "Welcome" pane](/docs/assets/debugging-rndt-welcome.jpg)
10+
![React Native DevTools 打开到“欢迎”面板](/docs/assets/debugging-rndt-welcome.jpg)
1111

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](/docs/debugging-native-code)).
12+
React Native DevTools 旨在调试 React 应用的问题,而不是取代原生工具。如果你想检查 React Native 的底层平台层(例如,在开发原生模块时),请使用 Android Studio Xcode 中可用的调试工具(请参阅 [调试原生代码](/docs/debugging-native-code))。
1313

1414
<details>
15-
<summary>**💡 Compatibility** — released in 0.76</summary>
15+
<summary>**💡 兼容性** — 0.76 中发布</summary>
1616

17-
React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.
17+
React Native DevTools 支持所有运行 Hermes 的 React Native 应用。它取代了以前的 Flipper、实验性调试器和 Hermes 调试器(Chrome)前端。
1818

19-
It is not possible to set up React Native DevTools with any older versions of React Native.
19+
无法使用任何旧版本的 React Native 设置 React Native DevTools。
2020

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.
21+
- **Chrome Browser DevTools — 不再支持**
22+
- 通过 `chrome://inspect` 连接到 React Native 不再受支持。由于最新版本的 Chrome DevTools(这些版本构建为匹配最新浏览器功能和 API)未经过测试,并且此前端缺少我们的自定义设置,因此功能可能无法正常工作。相反,我们与 React Native DevTools 一起提供了一个受支持的版本。
23+
- **Visual Studio Code — 不再支持**
24+
- 第三方扩展如 [Expo Tools](https://github.com/expo/vscode-expo) [Radon IDE](https://ide.swmansion.com/) 可能具有改进的兼容性,但不受 React 团队的直接支持。
2525

2626
</details>
2727
<details>
28-
<summary>**💡 Feedback & FAQs**</summary>
28+
<summary>**💡 反馈和常见问题**</summary>
2929

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.
30+
我们希望你使用的调试工具能够可靠、熟悉、简单且连贯。本页描述的所有功能都是基于这些原则构建的,我们还想在未来提供更多功能。
3131

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.
32+
我们正在积极迭代 React Native DevTools 的未来,并创建了一个集中化的 [GitHub 讨论](https://github.com/react-native-community/discussions-and-proposals/discussions/819) 来跟踪问题、常见问题和反馈。
3333

3434
</details>
3535

36-
## Core features
36+
## 核心功能
3737

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.
38+
React Native DevTools 基于 Chrome DevTools 前端。如果你有 Web 开发背景,其功能应该很熟悉。作为起点,我们建议浏览 [Chrome DevTools 文档](https://developer.chrome.com/docs/devtools),其中包含完整的指南以及视频资源。
3939

4040
### Console
4141

4242
![A series of logs React Native DevTools Sources view, alongside a device](/docs/assets/debugging-rndt-console.jpg)
4343

44-
The Console panel allows you to view and filter messages, evaluate JavaScript, inspect object properties, and more.
44+
Console 面板允许你查看和过滤消息、评估 JavaScript、检查对象属性等。
4545

46-
[Console features reference | Chrome DevTools](https://developer.chrome.com/docs/devtools/console/reference)
46+
[Console 功能参考 | Chrome DevTools](https://developer.chrome.com/docs/devtools/console/reference)
4747

48-
#### Useful tips
48+
#### 实用提示
4949

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.
50+
- 如果你的应用有很多日志,请使用过滤框或更改显示的日志级别。
51+
- 使用 [Live Expressions](https://developer.chrome.com/docs/devtools/console/live-expressions) 实时观察值。
52+
- 使用 [Preserve Logs](https://developer.chrome.com/docs/devtools/console/reference#persist) 在重新加载之间保持消息。
53+
- 使用 <kbd>Ctrl</kbd> + <kbd>L</kbd> 清除控制台视图。
5454

55-
### Sources & breakpoints
55+
### Sources 和断点
5656

57-
![A paused breakpoint in the React Native DevTools Sources view, alongside a device](/docs/assets/debugging-rndt-sources-paused-with-device.jpg)
57+
![一个暂停的断点在 React Native DevTools Sources 视图旁边,旁边是一个设备](/docs/assets/debugging-rndt-sources-paused-with-device.jpg)
5858

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.
59+
Sources 面板允许你查看应用的源文件并注册断点。使用断点定义代码行,应用应在其中暂停 — 允许你检查程序的实时状态并逐步执行代码。
6060

6161
[Pause your code with breakpoints | Chrome DevTools](https://developer.chrome.com/docs/devtools/javascript/breakpoints)
6262

6363
:::tip
6464

65-
#### Mini-guide
65+
#### 迷你指南
6666

67-
Breakpoints are a fundamental tool in your debugging toolkit!
67+
断点是你的调试工具包中的基本工具!
6868

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.
69+
1. 使用侧边栏或 <kbd>Cmd ⌘</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>P</kbd> 导航到源文件。
70+
2. 点击代码行旁边的行号列以添加断点。
71+
3. 使用右上方的导航控件在暂停时[逐步执行代码](https://developer.chrome.com/docs/devtools/javascript/reference#stepping)
7272

7373
:::
7474

75-
#### Useful tips
75+
#### 实用提示
7676

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).
77+
- 当应用暂停时,会出现一个“暂停在调试器中”的覆盖层。点击它以恢复。
78+
- 注意右侧面板,当在断点时,允许你检查当前范围和调用栈,并设置观察表达式。
79+
- 使用 `debugger;` 语句快速从文本编辑器设置断点。这将通过 Fast Refresh 立即到达设备。
80+
- 有多种断点类型!例如,[条件断点和日志点](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview)
8181

82-
## Reconnecting DevTools
82+
## 重新连接 DevTools
8383

84-
Occasionally, DevTools might disconnect from the target device. This can happen if:
84+
偶尔,DevTools 可能会与目标设备断开连接。这可能发生在以下情况下:
8585

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.
86+
- 应用已关闭。
87+
- 应用已重建(安装了新的原生构建)。
88+
- 应用在原生侧崩溃。
89+
- 开发服务器(Metro)已关闭。
90+
- 物理设备已断开连接。
9191

92-
On disconnect, a dialog will be shown with the message "Debugging connection was closed".
92+
断开连接时,将显示一条消息为“调试连接已关闭”的对话框。
9393

9494
![A reconnect dialog shown when a device is disconnected](/docs/assets/debugging-reconnect-menu.jpg)
9595

96-
From here, you can either:
96+
从这里,你可以:
9797

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.
98+
- **Dismiss**: 选择关闭(`×`)图标或点击对话框外部以返回到断开连接前的 DevTools UI
99+
- **Reconnect**: 选择“Reconnect DevTools”,并解决断开连接的原因。

0 commit comments

Comments
 (0)