使用React Native DevTools检查组件渲染
自React Native 0.83版本起，“React Native DevTools”成为推荐的Vega应用调试与分析工具。React Native DevTools内置于Metro，并提供：
- 组件检查器，用于检查层次结构、属性和样式。
- 控制台，用于查看JavaScript日志。
- 内置分析器，用于分析组件重新渲染及其原因。
- “网络”、“性能”和“内存”选项卡，用于进行更深入的分析。
先决条件
- React Native 0.83或更高版本。React Native DevTools在早期版本中不可用。如果您的应用使用RN 0.72，请改用Chrome DevTools。
- 两个终端窗口：一个用于端口转发和应用启动命令，一个用于Metro bundler。
- 在调试模式下内置的Vega应用。
设置React Native DevTools
步骤1： 设置端口转发
在第一个终端中，运行：
vega device start-port-forwarding --port 8081 --forward false
如果您连接了多台设备，请指定设备序列号：
vega device start-port-forwarding --port 8081 --forward false -d <<设备序列号>>
对于Vega虚拟设备测试，请使用VirtualDevice作为«设备序列号»。
该命令在不返回至提示符的情况下运行，表示转发会话处于活动状态。保持此终端处于打开状态。
步骤2： 启动Metro
在第二个终端中，导航到项目目录并启动Metro bundler：
npm start
等待Metro服务器显示：
INFO开发服务器已就绪。
INFO键盘命令可用：
r - 重新加载应用
d - 打开开发者菜单
j - 打开DevTools
步骤3： 启动调试应用
Metro运行后，返回第一个终端并启动应用的调试版本：
vega run-app <<调试VPKG路径>> <<交互性组件ID>>
例如，在Fire TV Stick上：
vega run-app build/armv7-debug/keplersample_armv7.vpkg com.amazon.keplersampleapp.main
当应用连接到Metro时，Metro终端会显示BUNDLE index.js。这表明设备正在与bundler通信。
如果Metro未显示BUNDLE index.js，请验证端口转发是否激活，以及Metro是否先于应用启动。
步骤4： 打开React Native DevTools
在Metro终端中，按j键打开React Native DevTools。这一步会打开浏览器窗口，并显示React Native DevTools界面。
标题栏会显示应用名称和设备信息（例如"com.amazon.keplersampleapp (Unknown Device) - React Native DevTools"）。
如果React Native DevTools未打开，请在Metro终端中按r键重新加载应用，然后重试。
检查和调试您的应用
React Native DevTools包含以下选项卡： 欢迎、控制台、源代码、网络、性能、内存、组件和分析器。本页包括Components（组件）、Profiler（分析器）、Network（网络）、Performance（性能）和Memory（内存）选项卡。
Components（组件）
使用组件选项卡检查组件层次结构、属性和样式。树形视图显示了React组件树的完整结构，从RootComponent向下延伸到具体的Text和View元素。
分析器
分析器选项卡通过记录您与应用交互时的提交周期，协助测量渲染性能。
步骤1： 开始分析
选择分析器选项卡，然后点击工具栏中的记录按钮（蓝色圆圈）。屏幕捕获渲染数据时会显示“正在进行分析...”。
步骤2： 与您的应用交互
分析期间，浏览应用以捕获要分析的渲染行为。触发React渲染的每一次用户交互，都会记录为一次提交。
步骤3： 停止分析
选择红色记录按钮以停止记录。分析器会将捕获到的提交周期制成条形图并显示在时间线中。
每个条柱代表一次React提交周期。黄色条柱越高，渲染时间越长。选择条柱即可查看对应提交周期内渲染的组件。
步骤4： 分析结果
分析器提供了两种视图来分析记录的数据：
火焰图视图
火焰图会显示所选提交的组件树。每个条柱代表一个组件。条柱宽度代表渲染用时。右侧面板显示提交详情：
- 优先级 ― 渲染优先级（普通或同步）。
- 提交时间 — 提交发生的时间点（相对于分析开始时间）。
- 持续时间 – 渲染时间、布局效果和被动效果。
- 更新原因是什么？ – 触发重新渲染的组件。
要进行更深入的跟踪分析，请参阅检查Vega应用中的跟踪数据和识别用户界面渲染问题。
排名视图
排名视图按渲染时间对组件进行排序，渲染最慢的组件排在最上方。此视图可用于快速识别渲染成本最高的组件。
有关分析重新渲染的更多详细信息，请参阅调查组件重新渲染问题和衡量应用KPI。
网络
Network选项卡捕获HTTP和HTTPS流量，包括fetch调用、XHR请求和媒体分段。使用它来检查请求、响应、标头和时间，并跟踪触发每个请求的是哪一行代码。
使用Network选项卡可以：
- 检查您的应用发出了哪些API调用以及它们是成功还是失败。
- 检查您的应用从服务器接收的数据。
- 追踪哪个代码触发了请求。
- 测量请求时长并发现缓慢的连接。
在列表中选择一个请求，在以下子选项卡中对其进行检查。
Headers（标头）
使用Headers选项卡验证正在调用的终端节点是正确的，包括URL和方法。通过检查200 OK状态码来确认成功响应，并在响应标头中检查缓存行为、内容类型和服务器信息。您还可以通过检查Access-Control-Allow-Origin标头来调试跨源资源共享 (CORS) 问题。
Preview（预览）
使用Preview选项卡在可折叠的树视图中浏览结构化JSON响应。这让您无需读取原始文本即可验证应用接收到的数据的形状，并一目了然地发现意外的空字段或缺失字段。
Response（响应）
使用Response选项卡查看带有行号的完整原始JSON有效负载。使用此视图复制响应数据以进行调试或比较，并验证API返回的确切数据格式、字段名称和值。
Initiator（发起者）
使用Initiator选项卡准确地确定是哪个代码触发了网络请求。它显示了从用户交互通过事件处理程序到网络调用的完整调用堆栈，并且您可以选择堆栈中的任何条目跳转到相应的源位置。
Timing（时间）
使用Timing选项卡来衡量请求的总持续时间，并将其细分为多个阶段，例如停顿或排队时间与内容下载时间。较长的停顿时间表明连接设置开销而不是服务器延迟。
Request list and filters（请求列表和过滤器）
请求列表按时间顺序显示所有请求。按类型（例如Fetch/XHR、JS、Img、Media（媒体）或Other（其他））筛选列表，并跟踪传输的总数据。滚动选项卡顶部的时间线栏以查看当前窗口之外的请求。
Override responses（覆盖响应）
要测试您的应用如何处理修改后的响应，请打开请求的快捷菜单，选择Override headers（覆盖标头），编辑该值并保存更改。这适用于JSON和媒体请求。
Media traffic（媒体流量）
对于流媒体应用，HTTP实时流媒体 (HLS) 视频分段（.ts文件）显示在媒体过滤器下方，HTTP上的动态自适应流媒体 (DASH) 区块（.m4s文件）显示在“Other”过滤器下方。
Network选项卡具备和不具备的功能
下表汇总了在Vega上验证的“Network”选项卡功能。
| 类别 | 功能 | 状态 |
|---|---|---|
| 观察 | 捕获Fetch/XHR请求 | 支持 |
| 观察 | 标头、预览和响应视图 | 支持 |
| 观察 | 请求发起者（JS调用堆栈） | 支持 |
| 观察 | 每次请求的时间（已停止/下载） | 支持 |
| 观察 | 协议、大小和持续时间 | 支持 |
| 观察 | 媒体分段请求 (HLS .ts / DASH .m4s) |
支持 |
| 观察 | SSL/HTTPS解密（无需设置证书） | 支持 |
| 观察 | 过滤、搜索和保留日志 | 支持 |
| 观察 | 控制台集成（日志和请求） | 支持 |
| 观察 | 列自定义 | 支持 |
| 操纵 | 覆盖标头和响应 | 支持 |
| 操纵 | 以fetch或cURL的方式复制 |
支持 |
| 操纵 | 导出会话 (HAR) | 支持 |
| 不起作用 – 使用Charles代理 | 阻止请求（URL或域名） | 在Vega或官方原版React Native上不起作用 |
| 不起作用 – 使用Charles代理 | 重播请求（重播XHR） | 在Vega或官方原版React Native上不起作用 |
| 不是DevTools的一部分 — 使用Charles代理 | 直播断点 | 不适用 |
| 不是DevTools的一部分 — 使用Charles代理 | 重定向到其他主机（远程映射） | 不适用 |
| 不是DevTools的一部分 — 使用Charles代理 | 限制带宽或延迟 | 不适用 |
| 不是DevTools的一部分 — 使用Charles代理 | 网络列表中的WebSocket帧 | 不可用；仅限控制台 |
| 限制 | 自动化、CLI或无头使用 | 仅限交互式 |
性能
Performance选项卡记录并可视化您的应用在一段时间内的活动。使用它来确定丢失的帧，了解网络请求、渲染和JavaScript执行是如何重叠的，并查看是什么阻塞了主线程。
使用Performance选项卡进行以下操作：
- 记录和可视化一段时间内的应用活动，以确定丢帧或速度缓慢的情况。
- 查看时间线上网络请求、渲染和JavaScript执行是如何重叠的。
- 找出阻止主线程或导致用户界面冻结的原因。
- 了解React渲染、过渡和暂停边界的调度。
时间线显示CPU和网络通道、调度程序轨道（阻止、过渡、暂停和空闲）和组件跟踪。自下而上、调用树和事件日志视图对记录期间花费的时间进行了细分。
有关更深入的原生级分析，请参阅检查Vega应用中的跟踪。
Memory（内存）
使用Memory选项卡捕获堆快照，查看您的应用使用了多少内存以及哪些对象类型消耗了内存。该快照显示了按构造函数（例如函数、数组和CodeBlocks）分组的保留内存，因此您可以确定哪些对象类型拥有最多的内存。
有关高级泄漏检测，请参阅检测内存泄漏以获取使用MemLab的指导。
Other选项卡
React Native DevTools还包括以下选项卡，用于进行额外的调试和分析：
- 控制台 – 查看应用中的
console.log、console.warn和console.error输出。在React Native 0.83版本中，Metro终端中不再显示日志。 - Sources（来源）– 通过断点、监视表达式和调用栈检查来浏览和调试JavaScript源文件。
已知限制
- 组件突出显示和叠加错误 - 选择一个组件以在设备上突出显示它可能会产生重复的
TypeError: Cannot read property 'style' of null（TypeError：无法读取null的'style'属性），该错误来自react-devtools-core。这不会影响捕获的分析器数据。提交、排名视图和更新属性仍能正确渲染。设备端元素标注本身不起作用。不要将此视为应用错误。 - 重新加载操作可能会使应用崩溃 - 避免在会话期间从DevTools中重新加载。
- 网络请求控制不受支持 – 阻止和重放操作会在用户界面中注册，但不会在Vega、Fire OS和官方原版React Native上生效。这与React Native DevTools文档一致，该文档将网络响应模拟、WebSocket检查和限制列为未实现。重定向、限制和实时断点完全不可用。使用Charles代理实现这些功能。
连接问题
如果DevTools与设备断开连接，则会显示“DevTools已断开连接”的对话框，并说明原因。选择Reconnect DevTools（重新连接DevTools）以重新连接，或选择Dismiss（关闭）在断开连接期间继续查看当前数据。
如果遇到“连接被拒绝”错误，请使用vega device start-port-forwarding --port 8081 --forward false，确认端口8081已正确转发。
对于云端开发环境，添加以下SSH配置选项：
LocalForward 8081 127.0.0.1:8081
相关主题
- 调查组件重新渲染问题
- 确定用户界面渲染问题
- 检查Vega应用中的跟踪
- 衡量应用KPI
- 使用Charles代理监控网络流量
- 检测内存泄漏
- 使用开发者菜单工具调试您的应用
- 设置快速刷新
- 设置用于AI驱动式开发的Amazon Devices Builder Tools
Last updated: 2026年8月17日
