调试您的 Web 应用


调试您的 Web 应用

您可以在开发计算机上使用 Chrome DevTools 来调试在 Fire TV 设备、Fire 平板电脑或其他安卓设备上运行的 Web 应用。

使用 USB 数据线或 WiFi 网络连接开发计算机和主机设备。

先决条件

安装 Chrome DevTools

要使用 Chrome DevTools 调试您的 Web 应用,您必须首先在计算机上安装 Chrome 浏览器(版本 32 或更高版本)。如需下载说明,请访问 http://www.google.com/chrome

Chrome DevTools 使用安卓调试桥 (adb)(安卓开发工具包工具的一部分)从您的计算机与 Web 应用进行通信。有关使用 Chrome DevTools 的更多信息,请参阅 Chromium 博客上的发现 Chrome DevTools

在您的开发计算机上,打开 Chrome。您应该使用您的某一 Google 账户登录 Chrome。远程调试在匿名模式或来宾模式下不工作。

使用 USB 设置调试环境

请按照以下这些步骤将开发计算机上的 Chrome DevTools 连接到主机设备上的 Web App Tester:

  1. 使用 USB 数据线将主机设备直接连接到开发计算机。请勿使用任何中间 USB 集线器。
  2. Web App Tester 中,单击测试以启动应用。
  3. 在您的开发计算机上,在 URL 输入行中输入 chrome://inspect。Chrome 浏览器将显示主机设备和正在运行的应用。单击检查以打开开发者工具窗口。

您现在即可使用 Chrome DevTools 的功能来调试和测试您的 Web 应用。

使用 WiFi 设置调试环境

要连接 Chrome DevTools 和 Web 应用以进行无线调试,请执行以下操作:

  1. 使用 USB 数据线将主机设备直接连接到开发计算机。
  2. 在主机设备上,点击并打开 Web App Tester
  3. 在您的计算机上,打开命令提示符窗口或终端 Shell,然后导航到安卓开发工具包平台 platform-tools 目录。
  4. 运行以下命令:

    在 Windows 上

    adb tcpip 5555
    

    在 OS X 上

    ./adb tcpip 5555
    
  5. 断开主机设备与计算机的连接。
  6. 确保您的开发计算机和设备连接到同一网络。
  7. 通过运行以下命令连接到您的设备,并在此处使用 Web App Tester 中指定的 IP 地址:

    在 Windows 上

    adb connect 192.168.1.133
    

    在 Mac OS X 上

    ./adb connect 192.168.1.133
    
  8. 在您的开发计算机上,在 URL 输入行中输入 chrome://inspect。Chrome 浏览器将显示主机设备和正在运行的应用。单击检查以打开开发者工具窗口。

随后,Chrome DevTools 将打开一个 Chrome 窗口,您可以在其中查看 Web 应用的代码并在运行时进行调试。

在第一代 Kindle Fire 上设置调试环境

Chrome DevTools 在与 Chromium 不兼容的安卓设备(包括第一代 Kindle Fire)上不可用。对于这些设备,JavaScript 控制台通过 WiFi 提供有限的调试功能。它允许您将 JavaScript 命令发送到设备。您必须先设置 Web App Tester,然后才能连接到 JavaScript 控制台。请参阅 Amazon Web App Tester 以了解更多信息。要在不支持 Chrome DevTools 的设备上设置调试环境,请执行以下操作:

  1. 在你的设备上点击并打开 Web App Tester 应用。
  2. 使用屏幕底部的全屏手柄打开状态栏。此步骤仅在 Fire 平板电脑上是必要的。
  3. 从屏幕顶部,在状态栏上向下滑动以打开“快速设置”。您会收到一个启用 JavaScript 控制台的通知。
  4. 点击通知以启用 JavaScript 控制台。将显示一个新的通知,其中包含访问计算机上的 JavaScript 控制台的 URL。
  5. 在您的计算机上,确保您与设备连接到同一网络。打开浏览器并输入上一步中指定的 URL。