远程调试 Android 设备

从你的 Windows 或 macOS 计算机在 Android 设备上远程调试实时内容。 以下教程页介绍如何:

  • 设置 Android 设备进行远程调试,然后从开发计算机中发现。

  • 在开发设备上检查和调试 Android 设备上的实时内容。

  • 将 Android 设备中的内容截屏到开发计算机上的开发工具实例上。

注意

目前不支持在 iOS 设备上远程调试 Microsoft Edge 应用。 以下指南专门针对 Android 设备上的 Microsoft Edge 进行远程调试。 如果使用的是 macOS 设备,请按照 Brightcove 调试指南使用 Safari 在 iOS 设备上远程调试 Microsoft Edge。 有关 Safari 中的 Web 检查器工具的详细信息,请参阅 Safari Web 开发工具

步骤 1:发现 Android 设备

下面的工作流适用于大多数用户。 有关更多帮助,请参阅下面的 故障排除:DevTools 未检测到 Android 设备

  1. 打开 Android 上的“开发人员选项”屏幕。 请参阅 配置设备上的开发人员选项

  2. 选择 “启用 USB 调试”。

  3. 在开发计算机上,打开 Microsoft Edge。

  4. 在“地址”栏中,转到 edge://inspect

    Microsoft Edge 中的 edge://inspect 页面

  5. 使用 USB 电缆将 Android 设备直接连接到开发计算机。 首次尝试连接时,将显示有关开发工具检测未知设备的提示。 在 Android 设备上接受“允许 USB 调试”权限提示。

    Android 设备上的“允许 USB 调试”权限提示

  6. 如果显示 Android 设备的型号名称,则 Microsoft Edge 已成功与设备建立连接。 继续第 2 步部分。

故障排除:DevTools 未检测 Android 设备

使用以下提示可帮助你对硬件的正确设置进行故障排除。

  • 如果使用 USB 集线器,尝试将 Android 设备直接连接到开发计算机。
  • 尝试拔下 Android 设备与开发机器之间的 USB 电缆,然后重新插入 USB 电缆。 解锁 Android 和开发计算机屏幕时完成任务。
  • 确保 USB 电缆正常工作。 应该能够在开发计算机上检查 Android 设备上的文件。

使用以下提示可帮助你验证软件是否正确设置。

如果 Android 设备上未显示 “允许 USB 调试 ”提示,请尝试:

  • 开发工具专注于开发计算机并且显示 Android 主屏幕时,断开 USB 电缆连接,然后重新连接。 有时,当 Android 或开发计算机屏幕锁定时,不会显示提示。
  • 更新 Android 设备和开发计算机的显示设置,使其永远不会进入睡眠状态。
  • 将 Android 的 USB 模式设置为 PTP。 请参阅 Galaxy S4 未显示授权 USB 调试对话框
  • 从 Android 设备上的“开发人员选项”屏幕中选择“撤销 USB 调试授权”,将其重置为全新状态。

如果在插入 Stack Overflow 时发现此页上未提及或 DevTools 设备中未检测到设备 的解决方案,请将解决方案添加到 Stack Overflow 问题

步骤 2:从开发计算机调试 Android 设备上的内容

  1. 在 Android 设备上打开 Microsoft Edge。

  2. 转到 edge://inspect。 将显示 Android 设备的型号名称,后跟设备序列号。 在下面,应显示设备上运行的 Microsoft Edge 版本,括号中会显示版本号。 每个打开的 Microsoft Edge 选项卡获取一个唯一部分。 可以从分区与该选项卡交互。

连接的远程设备

  1. “打开带有 URL 的选项卡” 文本框中,输入 URL,然后单击“ 打开”。 该页面将在 Android 设备上的新选项卡中打开。

  2. 单击刚刚打开的 URL 旁边的“ 检查 ”。 新的开发工具实例打开。

更多操作:聚焦、刷新或关闭选项卡

选择要焦点、刷新或关闭的选项卡旁边的焦点选项卡、重新加载或关闭。

用于聚焦、刷新或关闭选项卡的按钮

检查元素

转到 DevTools 实例的 “元素” 工具,将鼠标悬停在某个元素上以在 Android 设备的视区中突出显示它。

还可以在 Android 设备屏幕上点击某个元素,以在 “元素 ”工具中选择它。 在 DevTools 实例上单击“ 选择元素 (选择元素 ”) 图标,然后在 Android 设备屏幕上选择元素。

注意

选择元素 在第一次选择后被禁用,因此每次想要使用此功能时都需要重新启用它。

将 Android 屏幕截屏到开发计算机

单击 “切换截屏 (切换截屏) 图标以查看 DevTools 实例中 Android 设备的内容。

可以通过多种方式与截屏视频交互:

  • 单击将转换为点击,在设备上触发适当的触摸事件。
  • 计算机上的击键会发送到设备。
  • 若要模拟收缩手势,请在拖动时按住 Shift
  • 如果要滚动,请使用触控板或鼠标滚轮,或使用鼠标指针拖动。

使用以下提示来帮助你进行截屏:

  • 截屏视频仅显示页面内容。 截屏视频的透明部分表示设备接口,例如 Microsoft Edge 地址栏、Android 状态栏或 Android 键盘。
  • 截屏视频会对帧速率产生负面影响。 在测量滚动或动画时禁用截屏视频,以更准确地了解页面性能。
  • 如果 Android 设备屏幕锁定,截屏视频的内容将消失。 解锁 Android 设备屏幕以自动恢复截屏视频。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到,由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可