Skip to main content

React Native DevTools

React Native DevTools 是我们针对 React Native 的现代调试体验。从头开始专门构建，旨在从根本上比以前的调试方法更加集成、正确和可靠。

¥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.

React Native DevTools opened to the "Welcome" pane

React Native DevTools 旨在调试 React 应用问题，而不是替代原生工具。如果你想检查 React Native 的底层平台层（例如，在开发 Native 模块时），请使用 Android Studio 和 Xcode 中提供的调试工具（参见 调试原生代码）。

¥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).

💡 Compatibility — released in 0.76

React Native DevTools 支持所有运行 Hermes 的 React Native 应用。它取代了以前的 Flipper、Experimental Debugger 和 Hermes 调试器（Chrome）前端。

¥React Native DevTools supports all React Native apps running Hermes. It replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends.

无法使用任何旧版本的 React Native 设置 React Native DevTools。

¥It is not possible to set up React Native DevTools with any older versions of React Native.

  • Chrome 浏览器 DevTools — 不支持

    ¥Chrome Browser DevTools — unsupported

    • 不再支持通过 chrome://inspect 连接到 React Native。功能可能无法正常工作，因为尚未测试最新版本的 Chrome DevTools（其构建为匹配最新的浏览器功能和 API），并且此前端缺少我们的定制。相反，我们随 React Native DevTools 一起提供了受支持的版本。

      ¥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 — 不支持（预先存在）

    ¥Visual Studio Code — unsupported (pre-existing)

    • 第三方扩展（例如 Expo Tools 和 Radon IDE）可能具有更好的兼容性，但 React 团队并不直接支持。

      ¥Third party extensions such as Expo Tools and Radon IDE may have improved compatibility, but are not directly supported by the React team.

💡 Feedback & FAQs

我们希望你用来在所有平台上调试 React 的工具可靠、熟悉、简单且具有凝聚力。本页描述的所有功能都是基于这些原则构建的，我们也希望在未来提供更多功能。

¥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.

我们正在积极迭代 React Native DevTools 的未来，并创建了一个集中的 GitHub 讨论 来跟踪问题、常见问题和反馈。

¥We are actively iterating on the future of React Native DevTools, and have created a centralized GitHub discussion to keep track of issues, frequently asked questions, and feedback.

核心功能​

¥Core features

React Native DevTools 基于 Chrome DevTools 前端。如果你有 Web 开发背景，它的功能应该很熟悉。作为起点，我们建议浏览包含完整指南和视频资源的 Chrome DevTools 文档。

¥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 which contain full guides as well as video resources.

控制台​

¥Console

A series of logs React Native DevTools Sources view, alongside a device

控制台面板允许你查看和过滤消息、评估 JavaScript、检查对象属性等。

¥The Console panel allows you to view and filter messages, evaluate JavaScript, inspect object properties, and more.

控制台功能参考 | Chrome DevTools

¥Console features reference | Chrome DevTools

有用的提示​

¥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.

  • 使用 保留日志 在重新加载时保留消息。

    ¥Persist messages across reloads with Preserve Logs.

  • 使用 Ctrl + L 清除控制台视图。

    ¥Use Ctrl + L to clear the console view.

来源和断点​

¥Sources & breakpoints

A paused breakpoint in the React Native DevTools Sources view, alongside a device

Sources 面板允许你查看应用中的源文件并注册断点。使用断点定义你的应用应暂停的代码行 - 允许你检查程序的实时状态并逐步执行代码。

¥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.

使用断点暂停代码 | Chrome DevTools

¥Pause your code with breakpoints | Chrome DevTools

提示

迷你指南​

¥Mini-guide

断点是调试工具包中的一个基本工具！

¥Breakpoints are a fundamental tool in your debugging toolkit!

  1. 使用侧边栏或 Cmd ⌘+P / Ctrl+P 导航到源文件。

    ¥Navigate to a source file using the sidebar or Cmd ⌘+P / Ctrl+P.

  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 when paused.

有用的提示​

¥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.

  • 使用 debugger; 语句从文本编辑器快速设置断点。这将通过快速刷新立即到达设备。

    ¥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.

内存​

¥Memory

Inspecting a heap snapshot in the Memory panel

“内存”面板允许你获取堆快照并查看 JavaScript 代码随时间变化的内存使用情况。

¥The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.

记录堆快照 | Chrome DevTools

¥Record heap snapshots | Chrome DevTools

有用的提示​

¥Useful tips

  • 使用 Cmd ⌘+F / Ctrl+F 过滤堆中的特定对象。

    ¥Use Cmd ⌘+F / Ctrl+F to filter for specific objects in the heap.

  • 使用 分配时间线报告 可以以图表的形式查看随时间变化的内存使用情况，从而识别可能的内存泄漏。

    ¥Taking an allocation timeline report can be useful to see memory usage over time as a graph, to identify possible memory leaks.

React DevTools 功能​

¥React DevTools features

在集成的组件和 Profiler 面板中，你将找到 React DevTools 浏览器扩展的所有功能。它们在 React Native DevTools 中无缝工作。

¥In the integrated Components and Profiler panels, you'll find all the features of the React DevTools browser extension. These work seamlessly in React Native DevTools.

React 组件​

¥React Components

Selecting and locating elements using the React Components panel

“React 组件”面板允许你检查和更新渲染的 React 组件树。

¥The React Components panel allows you to inspect and update the rendered React component tree.

  • 将鼠标悬停或选择 DevTools 中的元素以在设备上高亮它。

    ¥Hover or select an element in DevTools to highlight it on device.

  • 要在 DevTools 中找到元素，请单击左上角的 "选择元素" 按钮，然后点击应用中的任意元素。

    ¥To locate an element in DevTools, click the top-left "Select element" button, then tap any element in the app.

有用的提示​

¥Useful tips

  • 可以在运行时使用右侧面板查看和修改组件上的属性和状态。

    ¥Props and state on a component can be viewed and modified at runtime using the right hand panel.

  • 使用 React 编译器 优化的组件将用 "备忘录 ✨" 徽章注释。

    ¥Components optimized with React Compiler will be annotated with a "Memo ✨" badge.

提示

专业提示：高亮重新渲染​

¥Protip: Highlight re-renders

重新渲染可能是 React 应用性能问题的重要因素。DevTools 可以高亮组件重新渲染。

¥Re-renders can be a significant contributor to performance issues in React apps. DevTools can highlight component re-renders as they happen.

  • 要启用，请单击“查看设置（⚙︎）”图标并选中 "组件渲染时高亮更新"。

    ¥To enable, click the View Settings (⚙︎) icon and check "Highlight updates when components render".

Location of the "highlight updates" setting, next to a recording of the live render overlay

React Profiler​

A profile rendered as a flame graph

“React Profiler”面板允许你记录性能配置文件，以了解组件渲染和 React 提交的时间。

¥The React Profiler panel allows you to record performance profiles to understand the timing of component renders and React commits.

有关更多信息，请参阅 原始 2018 指南（请注意，其中的部分内容可能已过时）。

¥For more info, see the original 2018 guide (note that parts of this may be outdated).

重新连接 DevTools​

¥Reconnecting DevTools

有时，DevTools 可能会断开与目标设备的连接。如果出现以下情况，则会发生这种情况：

¥Occasionally, DevTools might disconnect from the target device. This can happen if:

  • 应用已关闭。

    ¥The app is closed.

  • 应用已重建（安装了新的原生版本）。

    ¥The app is rebuilt (a new native build is installed).

  • 应用在原生端崩溃。

    ¥The app has crashed on the native side.

  • 开发服务器 (Metro) 已退出。

    ¥The dev server (Metro) is quit.

  • 物理设备已断开连接。

    ¥A physical device is disconnected.

断开连接时，将显示一个带有消息 "调试连接已关闭" 的对话框。

¥On disconnect, a dialog will be shown with the message "Debugging connection was closed".

A reconnect dialog shown when a device is disconnected

从这里，你可以：

¥From here, you can either:

  • Dismiss:选择关闭 (×) 图标或单击对话框外部以返回到断开连接前的最后状态的 DevTools UI。

    ¥Dismiss: Select the close (×) icon or click outside the dialog to return to the DevTools UI in the last state before disconnection.

  • 重新连接：选择 "重新连接 DevTools"，解决断开连接的原因。

    ¥Reconnect: Select "Reconnect DevTools", having addressed the reason for disconnection.