as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
Ring
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持

使用Chrome DevTools进行应用分析

使用Chrome DevTools进行应用分析

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

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

运行适用于Vega的React Native应用

按照以下步骤开始调试:

  1. 在Vega Studio中打开命令面板:

    Mac: Shift+Command ⌘+P

    Linux: Ctrl+Shift+P

  2. 在命令面板中输入Vega App: Run the current Vega app

    此命令让您可以:

    • 启动metro打包器(React Native的JavaScript bundler)
    • 设置设备和主机计算机之间的端口转发
    • 在设备上启动应用

启动CDT

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

在Vega Studio中

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

  5. Devices(设备)部分选择Fire TV Stick设备或Vega虚拟设备。

  6. 运行您的应用进行调试。

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

    b. 等待应用成功运行。

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

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

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

    Vega扩展中已连接的React Native打包器的屏幕截图。
  7. 启动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 Dev Tools

    屏幕截图,示出了CDT会话,您可以在该会话中从Profiles(配置文件)的Memory(内存)选项卡中选择分析类型。
  8. 当您启动CDT时,一个进度条会出现在新窗口中。加载完成后,CDT将在同一个窗口中打开。

    屏幕截图,示出了使用App Performance Tools时出现的连接错误。

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

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

设置断点或逐行调试

断点是代码中调试器暂停执行的指定点,可让您检查程序的状态。访问适用于开发者的Chrome以了解断点。

屏幕截图,示出了在进行逐行调试时在断点处暂停。
  1. 打开JavaScript代码文件&platform=kepler&dev=true&minify=false,然后搜索您复制的代码行。点击代码行号设置断点。

    屏幕截图,示出了断点所在代码行在右侧的Breakpoints(断点)部分菜单中有一个信息面板。
  2. 在您的应用中执行该代码。一旦到达断点,调试器就会暂停执行。

    屏幕截图,示出了调试器在运行时于断点处暂停。
  3. 照常检查变量或控制程序执行。

Flipper和CDT支持

据React Native团队称,React Native 0.74会终止对Flipper的支持。但是,CDT中的源映射支持在React Native 0.73中可以完全正常地运行,并且一旦更新到React Native 0.73,就可用于适用于Vega的React Native。


Last updated: 2025年10月31日