使用React DevTools检查组件渲染

React DevTools可帮助您在Vega应用中调试和分析React组件渲染。它可提供：

本页介绍如何对Vega应用安装、配置和使用React DevTools。

先决条件

有关设置说明，请参阅安装Vega SDK和构建Vega应用。

全局安装React DevTools。
npm install -g react-devtools@6.0.1
转发所需的端口以激活连接。 React DevTools通过端口8097进行连接，而React Native打包器使用端口8081。
vega device start-port-forwarding -p 8097 -f false -d <<设备序列号>> vega device start-port-forwarding -p 8081 -f false -d <<设备序列号>>
对于Vega虚拟设备测试，请使用VirtualDevice作为«设备序列号»。
启动React DevTools。
npx react-devtools
在您的项目目录中启动React Native打包器。
npm start
运行应用的调试版本。
vega run-app <<调试VPKG路径>> <<交互性组件ID>>
当您的应用加载时，React DevTools会连接。如果需要，在打包器终端中按r重新加载。

React DevTools提供两个主要界面来帮助您检查和调试应用。

使用Components（组件）视图检查您的组件层次结构、属性和样式。屏幕截图，示出了React DevTools组件面板。

Profiler（分析器）视图显示渲染指标和组件性能。屏幕截图，示出了React DevTools图表。

该图表显示了React提交周期。选择一个条形来检查在特定周期中渲染的组件。屏幕截图，示出了React DevTools Flamegraph（火焰图）视图。

使用Flamegraph视图检查渲染时间和层次结构。屏幕截图，示出了React DevTools Ranked（排名图）视图。

使用Ranked视图查看按渲染时间排序的组件。