Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
sunnylqm committed Nov 2, 2024
1 parent c2a3857 commit c6562af
Show file tree
Hide file tree
Showing 10 changed files with 445 additions and 497 deletions.
6 changes: 3 additions & 3 deletions cndocs/native-platforms.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ title: 桥接原生平台能力
:::

1. Turbo 原生模块
- [Android & iOS](turbo-native-modules.md)
- [跨平台使用 C++](the-new-architecture/pure-cxx-modules.md)
- [Android iOS 的原生模块](turbo-native-modules.md)
- [使用 C++ 实现跨平台的原生模块](the-new-architecture/pure-cxx-modules.md)
- [高级:自定义 C++ 类型](the-new-architecture/custom-cxx-types.md)
2. Fabric 原生组件
- [Android & iOS](fabric-native-components.md)
- [Android iOS 的原生 UI 组件](fabric-native-components.md)
92 changes: 46 additions & 46 deletions cndocs/react-native-devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,95 +5,95 @@ title: React Native 开发者工具

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

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

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

<details>
<summary>**💡 Compatibility** — released in 0.76</summary>
<summary>**💡 兼容性** — 0.76 中发布</summary>

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

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

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

</details>
<details>
<summary>**💡 Feedback & FAQs**</summary>
<summary>**💡 反馈和常见问题**</summary>

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 的未来,并创建了一个集中化的 [GitHub 讨论](https://github.com/react-native-community/discussions-and-proposals/discussions/819) 来跟踪问题、常见问题和反馈。

</details>

## Core features
## 核心功能

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

### Console

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

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

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

#### Useful tips
#### 实用提示

- If your app has a lot of logs, use the filter box or change the log levels that are shown.
- Watch values over time with [Live Expressions](https://developer.chrome.com/docs/devtools/console/live-expressions).
- Persist messages across reloads with [Preserve Logs](https://developer.chrome.com/docs/devtools/console/reference#persist).
- Use <kbd>Ctrl</kbd> + <kbd>L</kbd> to clear the console view.
- 如果你的应用有很多日志,请使用过滤框或更改显示的日志级别。
- 使用 [Live Expressions](https://developer.chrome.com/docs/devtools/console/live-expressions) 实时观察值。
- 使用 [Preserve Logs](https://developer.chrome.com/docs/devtools/console/reference#persist) 在重新加载之间保持消息。
- 使用 <kbd>Ctrl</kbd> + <kbd>L</kbd> 清除控制台视图。

### Sources & breakpoints
### Sources 和断点

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

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

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

:::tip

#### Mini-guide
#### 迷你指南

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

1. Navigate to a source file using the sidebar or <kbd>Cmd ⌘</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>P</kbd>.
2. Click in the line number column next to a line of code to add a breakpoint.
3. Use the navigation controls at the top right to [step through code](https://developer.chrome.com/docs/devtools/javascript/reference#stepping) when paused.
1. 使用侧边栏或 <kbd>Cmd ⌘</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>P</kbd> 导航到源文件。
2. 点击代码行旁边的行号列以添加断点。
3. 使用右上方的导航控件在暂停时[逐步执行代码](https://developer.chrome.com/docs/devtools/javascript/reference#stepping)

:::

#### Useful tips
#### 实用提示

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

## Reconnecting DevTools
## 重新连接 DevTools

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

- The app is closed.
- The app is rebuilt (a new native build is installed).
- The app has crashed on the native side.
- The dev server (Metro) is quit.
- A physical device is disconnected.
- 应用已关闭。
- 应用已重建(安装了新的原生构建)。
- 应用在原生侧崩溃。
- 开发服务器(Metro)已关闭。
- 物理设备已断开连接。

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

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

From here, you can either:
从这里,你可以:

- **Dismiss**: Select the close (`×`) icon or click outside the dialog to return to the DevTools UI in the last state before disconnection.
- **Reconnect**: Select "Reconnect DevTools", having addressed the reason for disconnection.
- **Dismiss**: 选择关闭(`×`)图标或点击对话框外部以返回到断开连接前的 DevTools UI
- **Reconnect**: 选择“Reconnect DevTools”,并解决断开连接的原因。
Loading

0 comments on commit c6562af

Please sign in to comment.