从 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 设备屏幕解锁可自动恢复抓屏。

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

  1. Android上的远程调试

    来源: http://www.seejs.com/archives/296 目录 远程调试概述 使用 Chrome 的 ADB 扩展进行远程调试 1. 安装 ADB 扩展 2. 启用你的移动设备上的 ...

  2. Ubuntu18.04使用adb和tcpdump对android设备进行网络调试

    准备工作 1. Android设备需要root 2. 在 https://www.androidtcpdump.com/ 下载适用于Android的tcpdump可执行文件 3. 本地安装 andro ...

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

    一:背景 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在p ...

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

    一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc ...

  5. 远程调试 Android 设备使用入门(谷歌翻译版)

    移动前端调试方案(Android + Chrome 实现远程调试) 目录 要求 第 1 步:发现您的 Android 设备 第 2 步:从您的开发计算机调试 Android 设备上的内容. 更多操作: ...

  6. android:如何通过chrome远程调试APP中的webView的h5代码

    今天出现一个问题,在老板的Mate9 Pro上,我们APP的所有H5页面都是一片空白,但是在其他手机上都是好的,那么我们就怀疑是h5报错了,但是到底是什么错,无法得知,所以就想要可以像在pc的chro ...

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

    网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模 ...

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

    你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原 ...

  9. 移动应用调试之Inspect远程调试

    移动应用调试之Inspect远程调试 一.准备工作 chrome浏览器,建议最新版本 如果你点击inspect打开的DevTools窗口一片空白,且刷新无效时,那极有可能是由于被墙的缘故. 二.Ins ...

随机推荐

  1. Spring-AOP-学习笔记(2)-AspectJ

    1.启用@AspectJ,需要下载aspectjweaver.jar <!-- 默认启用动态代理 --><aop:aspectj-autoproxy/> <!-- 注解启 ...

  2. (转)ORACLE中关于外键缺少索引的探讨和总结

    在ORACLE数据库中,定义外键约束时,ORACLE是不会自动创建对应索引的,必须手动在外键约束相关的列上创建索引.那么外键字段上是否有必要创建索引呢?如果有必要的话,巡检时,如何找出外键字段上没有创 ...

  3. K nearest neighbor cs229

    vectorized code 带来的好处. import numpy as np from sklearn.datasets import fetch_mldata import time impo ...

  4. 【踩坑记录】 使用form标签的 reset() 方法报错原因及处理方法

    如果form标签内包含了 id 为 reset 的元素,在调用form的 reset() 方法时,会报xxx.reset is not a function,原因是在调用form的 reset() 方 ...

  5. 重新学习ESP32(零)之环境搭建——转载——windows平台

    原文来自:https://www.makingfun.xyz/2018/09/18/esp32-hello-world/ 前言 前几天看到乐鑫的公众号推送了一篇文章,说是ESP8266最新的SDK风格 ...

  6. jekins初始化

    持续交付:代码随着项目深入不断增多,不断完善,因此谓之持续交付:亦或是项目功能不断改进,修正都造成了交付活动的持续性. 好处:降低风险,尽早发现问题,单元测试通过不意味着集成测试也能通过. jenki ...

  7. python中ord()函数,chr()函数,unichr()函数

    ord()函数,chr()函数,unichr()函数 chr()函数用一个范围在range(256)内的(就是0-255)整数作参数,返回一个对应的字符.unichr()跟它一样,只不过返回的是Uni ...

  8. QSettings 介绍

    https://blog.csdn.net/liang19890820/article/details/50513695 QSettings settings(“./test.ini”, QSetti ...

  9. Linux - TCP/IP网络协议基础

    1.0 Tcp / IP 背景介绍 上世纪70年代,随着计算机的发展,人们意识到如果想要发挥计算机的更大作用,就要讲世界各地的计算机连接起来. 但是简单的连接时不够的,因为计算机之间无法沟通.因此设计 ...

  10. Liquibase使用(转)

    文章目录 介绍快速使用Springboot中引入依赖配置日志文件ChangeLog编写变更记录ChangeSetMaven中引入依赖配置liquibase.properties编写变更记录Change ...