使用Chrome DevTools进行应用分析

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发行说明。

适用于Vega的React Native支持使用Chrome DevTools (CDT) 调试Fire TV应用。Chrome浏览器内置CDT，让开发者可以检查、调试和分析应用。有关CDT的基础知识，请访问React Native调试文档（仅提供英文版）。

本页面介绍如何在Vega Studio中为Vega虚拟设备和Fire TV Stick设置CDT调试。

运行适用于Vega的React Native应用

按照以下步骤开始调试：

在Vega Studio中打开命令面板：

Mac： Shift + Command ⌘ + P

Linux： Ctrl + Shift + P
输入Vega App: Run the current Vega app。

此命令让您可以：
- 启动metro打包器（React Native的JavaScript bundler）
- 设置设备和主机计算机之间的端口转发
- 在设备上启动应用

启动CDT

从Vega Studio或Chrome浏览器启动CDT。Vega Studio提供集成的体验，而Chrome则提供直接的浏览器访问权限和特定于浏览器的工具。使用Vega Studio中的认证版本以获得最佳效果。完成以下步骤：

在Vega Studio中

将您的Vega设备连接到开发计算机。
在Visual Studio Code (VS Code) 中，转到Vega Studio面板。
从Vega部分中选择您的项目。
在Build Modes（构建模式）部分中，选择Debug（调试）。

注意： 适用于React Native的CDT仅支持调试内部版本。
从Devices（设备）部分选择Fire TV Stick设备或Vega虚拟设备。
运行您的应用进行调试。

a. 按照运行适用于Vega的React Native应用中的步骤操作。

b. 等待应用成功运行。

c. 确保React Native打包器已连接。

d. 导航到VS Code输出窗口。

e. 从下拉列表中选择React Native。

Vega扩展中已连接的React Native打包器
启动CDT。

a. 打开命令面板。
- Mac： Shift + Command ⌘ + P
- Linux： Ctrl + Shift + P
b. 输入Vega: Launch Dev Tools，然后若是Mac则按return键，若是Linux则按Enter键。

在App Performance Tools（应用性能工具）中启动CDT

您也可以从Vega Studio > App Performance Tools（应用性能工具）中选择Chrome DevTools。

CDT会话
当您启动CDT时，一个进度条会出现在新窗口中。加载完成后，CDT将在同一个窗口中打开。

连接错误

如果CDT无法连接到设备上的应用，则会在窗口顶部看到Disconnected（已断开连接）。

如果CDT由于启动画面显示、应用重启或其他原因而断开连接，请关闭Vega Studio中的DevTools选项卡。然后，按照启动CDT中的步骤重新连接。