转: Android 设备的远程调试入门

从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。 本教程将向您展示如何:

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

图 1. 远程调试可以让您从自己的开发计算机上检查 Android 设备上运行的页面。

第 1 步:发现您的 Android 设备

下面的工作流程适用于大多数用户。 如需更多帮助,请参阅问题排查:DevTools 检测不到 Android 设备

1、在您的 Android 设备上打开 Developer Options 屏幕。 请参阅配置设备上的开发者选项 {:.external}。

2、选择 Enable USB Debugging

3、在您的开发计算机上打开 Chrome。

4、打开 DevTools

5、在 DevTools 中,点击 主菜单,{:.devtools-inline} 然后选择 More tools > Remote devices

          图 2. 通过主菜单打开 Remote Devices 标签

6、在 DevTools 中,打开 Settings 标签。

7、确保启用 Discover USB devices 复选框。

         图 3. 启用 Discover USB Devices 复选框

8、使用 USB 电缆将 Android 设备直接连接到您的开发计算机。 首次连接时,通常会看到 DevTools 检测到未知设备。 如果您 Android 设备的型号名称下显示绿色圆点和 Connected 文本,

则表示 DevTools 已与您的设备成功建立连接。 继续执行第 2 步

         图 4Remote Devices 标签显示成功检测到待授权的未知设备

9、如果设备显示 Unknown,则根据 Android 设备上的权限提示接受 Allow USB Debugging

问题排查:DevTools 检测不到 Android 设备

请确保正确安装硬件:

  • 如果是使用 USB 集线器,请尝试将您的 Android 设备直接连接到开发计算机上。
  • 尝试拔出 Android 设备与开发计算机之间的 USB 电缆,然后再将其插回原位 。 在 Android 设备与开发计算机的屏幕未锁定时,执行此操作。
  • 确保您的 USB 电缆正常工作。 您应该能够从自己的开发计算机上检查 Android 设备上的文件。

请确保正确安装您的软件:

如果您的 Android 设备上未显示 Allow USB Debugging 提示,请尝试:

  • 当 DevTools 在开发计算机上处于焦点状态时,断开并重新连接 USB 电缆,此时将会显示 Android 主屏幕。 换言之,有时如果 Android 设备或开发计算机的屏幕锁定,则不会显示此提示。
  • 更新您的 Android 设备和开发计算机的显示设置,以免其进入休眠状态。
  • 将 Android 的 USB 模式设置为 PTP。 请参阅 Galaxy S4 未显示 Authorize USB debugging 对话框
  • 在 Android 设备的 Developer Options 屏幕上选择 Revoke USB Debugging Authorizations,以将其重置为新状态。

如果您发现本节或 Chrome DevTools 设备插入时未检测到设备中未提及的解决方案, 请在 Stack Overflow 问题下添加答案,或者在 webfundamentals 存储库中提出问题

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

1、在 Android 设备上打开 Chrome。

2、在 Remote Devices 标签中,点击与您的 Android 设备型号名称匹配的标签。 在此页面的顶部,您会看到您 Android 设备的型号名称,然后是序列号。

再往下,您可以看到设备上运行的 Chrome 的版本,版本号附在括号内。 每个打开的 Chrome 标签都有自己的区域。 您可以从区域与标签交互。

如果有任何使用 WebView 的应用,您也会看到针对每个应用的区域。 在图 5 中,没有打开任何标签或 WebView。

         图 5. 连接的远程设备

3、在 New tab 文本框中,输入一个网址,然后点击 Open。 此页面将在 Android 设备上的新标签中打开。

4、点击您刚刚打开的网址旁的 Inspect。 新的 DevTools 实例随即打开。 您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。

因此,如果您的 Android 设备正在运行一个非常旧的 Chrome 版本,则 DevTools 实例看上去可能与您常用的实例有很大的差别。

更多操作:重新加载、聚焦或关闭一个标签

点击您要重新加载、聚焦或关闭的标签旁的 More Options  。

图 6. 重新加载、聚焦或关闭标签的菜单

检查元素

转到您的 DevTools 实例的 Elements 面板,将鼠标指针悬停在一个元素上以在 Android 设备的视口中突出显示该元素。

您还可以在 Android 设备屏幕上点按一个元素,以在 Elements 面板中选择该元素。 点击您的 DevTools 实例上的 Select Element , {:.devtools-inline} 然后在您的 Android 设备屏幕上点按此元素。

请注意,Select Element 将在第一次轻触后停用,因此,每次想要使用此功能时您都需要重新启用。

将 Android 屏幕抓屏到您的开发计算机上

点击 Toggle Screencast ,{:.devtools-inline} 以在您的 DevTools 实例中查看 Android 设备的内容。

您可以通过多种方式与抓屏互动:

  • 将点击转变为点按,在设备上触发适当的轻触事件。
  • 将计算机上的按键发送至设备。
  • 要模拟双指张合手势,请按住 Shift 并拖动。
  • 要滚动,请使用您的触控板或鼠标滚轮,或者使用您的鼠标指针抛式滚动。

关于抓屏的一些注意事项:

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

原文地址:https://www.cnblogs.com/wind-wang/p/11287690.html

时间: 2024-10-10 18:06:13

转: Android 设备的远程调试入门的相关文章

Android上的远程调试

来源: http://www.seejs.com/archives/296 目录 远程调试概述 使用 Chrome 的 ADB 扩展进行远程调试 1. 安装 ADB 扩展 2. 启用你的移动设备上的 USB 调试功能 3. 通过 USB 连接你的 PC 和移动设备 4. 开始使用 ADB 扩展进行调试 5. 调试你的应用程序 注意 端口反向转发(实验) 1. 连接你的移动设备 2. 启用端口反向转发 3. 添加一个端口转发规则 4. 利益 注意: 我们在远程调试中使用的交互协议信息,请参阅调试协

chrome://inspect 移动前端调试方案(Android + Chrome 实现远程调试)

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d

移动前端调试方案(Android + Chrome 实现远程调试)

一:背景 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个

远程调试 Android 设备使用入门

远程调试 Android 设备使用入门 目录 要求 第 1 步:发现您的 Android 设备 第 2 步:从您的开发计算机调试 Android 设备上的内容. 更多操作:重新加载.聚焦或关闭一个标签 检查元素 Android 设备到开发计算机的抓屏 反馈 By Kayce Basques Technical Writer at Google 从 Windows.Mac 或 Linux 计算机远程调试 Android 设备上的实时内容. 本教程将向您展示如何: 设置您的 Android 设备进行

如何通过Chrome远程调试android设备上的Web网站

网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面. 下面再说一下环境配置: 1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验.安装chrome版本为58.0.3029.83: 2.PC端,win7 64

[转] 在安卓设备上使用 Chrome 远程调试功能

你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原生安卓应用中调试网页内容. 将屏幕从你的安卓设备上投影到你的开发机器上. 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器. 需求 要开始远程调试,你需要: 安装 Chrome 32 或者之后的版本. 连接安卓设备用的 USB 线缆. 对于通过浏览器调试:安卓 4.0 以上并且安装了 Ch

浏览器远程调试

做移动互联网开发呢,比较头疼的可能就是调试问题了,我是这么感觉的.因此,我对市面上比较流行的远程调试方法做了总结,对比了 Firefox.Chrome.Opera 三大浏览器的远程调试工具,大家各取所需,希望能对大家的日常工作有多帮助. 一.Opera 远程调试 准备工作: 下载桌面版 Opera 下载欧朋 HD 最新版 下载欧朋 HD 模拟器 方式一. 通过欧朋 HD 模拟器和 Opera Dragonfly 进行远程调试 安装下载欧朋 HD 模拟器.桌面版 Opera.欧朋 HD. 打开 O

VS远程调试与附加调试

使用场景 假如你要开发的程序需要运行在独特的硬件上,比如:服务器,然而这个"独特的硬件"却不能给你装VS,这时候远程调试就登场了. 测试工具/环境一览 Key Value VS版本 VS2017 被调试程序net框架版本 4.0 目标设备系统 Win7 32位 目标设备IP 168.5.16.42 我自己的ip 192.168.11.106 如果远程机器没密码,需要配置这个 测试代码 static void Main(string[] args) { Console.WriteLine

利用 Chrome 开发者工具远程调试 Android 中的原生 WebView

之前写过一篇关于 Android Studio 断点调试技巧 的文章,但都是针对 Native 代码的调试,对于 Hybrid 开发模式下的 WebView 却无从下手.幸运的是,PC 中的 Chrome 浏览器提供的开发者工具能够帮助我们远程调试 Android 中的 WebView 加载的网页. Android 4.4 (KitKat) 开始,使用 Chrome 开发者工具可以帮助我们在原生 Android 应用中远程调试 WebView 网页内容.一起来看看怎么操作吧. 第一步,设置 We