使用Chrome DevTools进行应用分析
适用于Vega的React Native支持使用“Chrome DevTools” (CDT) 对Fire TV应用进行调试和分析。使用CDT分析CPU性能、内存使用情况和网络活动。Chrome浏览器内置CDT，让开发者可以检查、调试和分析应用。有关CDT的基础知识，请访问React Native调试文档（仅提供英文版）。
本页面介绍如何在Vega Studio中为Vega虚拟设备和Fire TV Stick设置CDT调试。
运行适用于Vega的React Native应用
按照以下步骤开始调试：
-
在Vega Studio中打开命令面板：
Mac：
Shift+Command ⌘+PLinux：
Ctrl+Shift+P -
在命令面板中输入Vega App: Run the current Vega app。
此命令让您可以：
- 启动metro打包器（React Native的JavaScript bundler）
- 设置设备和主机计算机之间的端口转发
- 在设备上启动应用
启动CDT
使用Vega Studio中的集成调试体验启动CDT。完成以下步骤：
- 将您的Vega设备连接到开发计算机。
- 在Visual Studio Code (VS Code) 中，转到Vega Studio面板。
- 从Vega部分中选择您的项目。
-
在Build Modes（构建模式）部分中，选择
Debug（调试）。注意： React Native的CDT仅适用于调试构建版本。 -
从设备部分选择Fire TV Stick设备或Vega虚拟设备。
-
运行您的应用进行调试。
a. 按照运行适用于Vega的React Native应用中的步骤操作。
b. 等待应用成功运行。
c. 验证“React Native打包器”是否连接。
如未连接打包器，请从命令面板再次运行Vega应用： 运行当前Vega应用，以重启Metro。
d. 导航到VS Code输出窗口。
e. 从下拉列表中选择React Native。
-
启动CDT。
a. 打开命令面板。
Mac：
Shift+Command ⌘+PLinux：
Ctrl+Shift+Pb. 输入Vega: Launch Dev Tools（Vega：启动开发工具），然后若是Mac则按return键，若是Linux则按Enter键。
您也可以从Vega Studio > App Performance Tools（应用性能工具）中选择Chrome Dev Tools。
-
当您启动CDT时，一个进度条会出现在新窗口中。加载完成后，CDT将在同一个窗口中打开。Sources（来源）和Console（控制台）选项卡变为可用状态，同时左侧面板会出现应用的JavaScript文件。
如果CDT无法连接到设备上的应用，则窗口顶部会出现Disconnected（已断开连接）提示。
如果CDT由于启动画面显示、应用重启或其他原因而断开连接，请关闭Vega Studio中的DevTools选项卡。然后，按照启动CDT中的步骤重新连接。
设置断点或逐行调试
断点是代码中调试器暂停执行的指定点，可让您检查程序的状态。访问适用于开发者的Chrome以了解断点。
-
在Sources选项卡中，扩展localhost:8081 > index.bundle/并打开
&platform=kepler&dev=true&minify=false文件。搜索要调试的函数或行，然后选择行号以设置断点。
-
在应用中执行该代码。调试器到达断点后会停止执行。
-
照常检查变量或控制程序执行。
分析应用性能
设置CDT后，使用性能选项卡记录CPU配置文件，或使用内存选项卡捕获堆快照。有关结果解读指南，请参阅应用性能最佳实践和衡量应用KPI。
Flipper和CDT支持
据React Native团队称，React Native 0.74会终止对Flipper的支持。React Native 0.73已完全支持CDT中的源映射功能。更新到React Native 0.73后，适用于Vega的React Native受到支持。
相关主题
Last updated: 2026年7月10日
