远程调试 Android 设备入门

在 Android 设备上从 Windows 或 macOS 计算机远程调试实时内容。 以下教程页面教你如何完成以下操作。

  • 设置 Android 设备以进行远程调试,并从开发计算机中发现它。
  • 从开发计算机检查和调试 Android 设备上的实时内容。
  • 将 Android 设备中的内容说明截屏视频到开发计算机上的 DevTools 实例。

备注

远程调试目前不支持 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 中的页面。

    Remote Debugging lets you inspect a page running on an Android device from your development machine

  5. 使用 USB 电缆将 Android 设备直接连接到开发计算机。 第一次尝试连接时,应显示一个提示,提示您检测未知设备 DevTools。 接受 Android 设备上的 " 允许 USB 调试 " 权限提示。

    Remote Debugging lets you inspect a page running on an Android device from your development machine

  6. 如果你的 Android 设备的型号名称已显示,则 Microsoft Edge 已成功建立与你的设备的连接。 转到 " 步骤 2 " 部分。

疑难解答: DevTools 未检测到 Android 设备

使用以下提示来帮助你解决硬件的正确设置。

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

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

如果你的 Android 设备上未显示 " 允许 USB 调试 " 提示,请使用以下提示来帮助你解决问题。

  • 断开连接并重新连接 USB 电缆的同时,DevTools 将集中在开发计算机上,并且显示 Android 主屏幕。

    备注

    如果您的 Android 或开发计算机屏幕被锁定,则会显示提示。

  • 更新 Android 设备和开发计算机的显示设置,以便每个设备都不会进入睡眠状态。

  • 将 Android 的 USB 模式设置为 PTP。 有关详细信息,请导航到 " Galaxy S4 不显示授权 USB 调试" 对话框

  • 从 Android 设备上的 "开发工具选项" 屏幕中选择 "撤消 USB 调试授权",将其重置为新状态。

如果您发现此页面或 DevTools 设备上未提及的解决方案在堆栈溢出 时未检测到设备 ,请将您的解决方案添加到堆栈溢出问题!

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

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

  2. 导航到 edge://inspect 您的 Android 设备的型号名称,后跟设备序列号。 在此情况下,应显示设备上运行的 Microsoft Edge 版本,其中版本号位于括号中。 每个打开的 Microsoft Edge 选项卡都将获取一个唯一的分区。 你可以从分区与该选项卡进行交互。

    Remote Debugging lets you inspect a page running on an Android device from your development machine

  3. 在 " 打开包含 url 的选项卡 " 框中,输入 url,然后选择 " 打开"。 页面将在 Android 设备上的新选项卡中打开。

  4. 选择您刚刚打开的 URL 旁边的 " 检查 "。 将打开一个新的 DevTools 实例。

更多操作:焦点、重新加载或关闭选项卡

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

Remote Debugging lets you inspect a page running on an Android device from your development machine

检查元素

转到 DevTools 实例的 " 元素 " 面板,将鼠标悬停在某个元素上,将其突出显示在 Android 设备的视口中。

您也可以在 Android 设备屏幕上选择一个元素,以便在 " 元素 " 面板中选择该元素。 选择 DevTools 实例上的 " 选择元素 \ ( 选择元素 \ ) " 图标,然后在 Android 设备屏幕上选择该元素。

备注

选择第一个选项后,"选择元素" 已禁用,因此必须在每次使用该功能时重新启用它。

将 Android 屏幕说明截屏视频到开发计算机

选择 " 切换说明截屏视频 \ ( 切换说明截屏视频 \ ) " 图标可在 DevTools 实例中查看 Android 设备的内容。

你可以通过以下方式与说明截屏视频交互。

  • 单击被转换为点击,在设备上触发正确的触摸事件。
  • 将计算机上的击键发送到设备。
  • 若要模拟捏出的手势,请 Shift 在拖动时按住。
  • 若要滚动,请使用触控板或鼠标滚轮,或使用鼠标指针投掷。

备注

使用以下提示可帮助您说明截屏视频。

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

与 Microsoft Edge 开发人员工具团队联系

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。
  • 发推 @EdgeDevTools
  • 我们想要的 Web 提交建议。
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。
原始页面位于此处,由 Kayce Basques\(Chrome DevTools & Lighthouse 的技术作家\)撰写。

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。