步骤1:

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

设置您的Android设备进行远程调试,并从开发机器中发现它。
从您的开发机器检查和调试Android设备上的实时内容。
将来自Android设备的内容屏幕截图到开发机器上的DevTools实例。

要求

Chrome 32或更高版本安装在您的开发机器上。
USB驱动程序安装在您的开发机器上,如果您使用的是Windows。确保设备管理器报告正确的USB驱动程序。
用于将Android设备连接到开发机的USB电缆。
Android 4.0或更高版本。
Chrome Android版已安装在您的Android设备上。
步骤1:探索您的Android装置

  • 在Android设备上,选择设置 > 开发者选项 > 启用USB调试。默认情况下,在Android 4.2及更高版本中隐藏开发者选项。请参阅启用设备上开发人员选项 以了解如何启用它。
  • 在开发机器上,打开Chrome。您应该使用自己的某个Google帐户登录Chrome。远程调试在隐身模式或访客模式下不工作 。
  • 打开DevTools。
  • 在DevTools中,单击主菜单, 主菜单 然后选择更多工具 > 远程设备。

  • 在DevTools中,如果显示另一个选项卡,请单击“ 设置”选项卡。
  • 确保启用Discover USB设备。
  • 使用USB电缆将Android设备直接连接到开发机器。不要使用任何中间USB集线器。如果这是您第一次将Android设备连接到此开发机器,您的设备会显示在“ 未知”下,其下方显示“ 待批准 ”文字。

  • 如果您的设备显示为未知在Android设备上接受允许USB调试权限提示。未知将替换为您的Android设备的型号名称。绿色圆圈和已连接文本表示您已设置为从开发机器远程调试Android设备。

注意:如果您在发现过程中遇到任何问题,可以通过在Android设备上选择设置 > 开发人员选项 > 撤消USB调试授权来重新启动它。

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

  • 如果您尚未在Android设备上打开Chrome,请立即打开。
  • 返回DevTools,单击与设备型号名称匹配的选项卡。在此页面顶部,您会看到Android设备的型号名称,后面是其序列号。在下面,您可以看到在设备上运行的Chrome版本,版本号在括号中。每个打开的Chrome标签都有自己的部分。您可以从此部分与该选项卡进行交互。如果有任何使用WebView的应用程序,您还会看到每个应用程序的一个部分。下面的截图没有打开任何选项卡或WebViews。

  • 在“ 新建”选项卡旁边,输入URL,然后单击“ 打开”。该页面会在Android设备上的新标签页上打开。
  • 点击您刚刚打开的网址旁边的“ 检查”。将打开一个新的DevTools实例。在Android设备上运行的Chrome版本决定在开发机器上打开的DevTools的版本。因此,如果您的Android设备运行的是一个非常老的Chrome版本,DevTools实例可能看起来与以前不同。

更多操作:重新加载,聚焦或关闭标签页

  • 单击要重新加载,聚焦或关闭的选项卡旁边的更多选项 更多的选择。

检查元素

  • 转到DevTools实例的“ 元素”面板,将鼠标悬停在某个元素上以在Android设备的视口中将其突出显示。
  • 您也可以点按Android设备屏幕上的元素,然后在“ 元素”面板中将其选中 。单击您的DevTools实例上的选择元素 选择元素,然后点击Android设备屏幕上的元素。请注意,选择元素 在第一次触摸后被禁用,因此您需要在每次要使用此功能时重新启用它。

PS:从Android设备到开发机的屏幕录像

  • 单击切换屏幕录像 切换屏幕录像 可在DevTools实例中查看Android设备的内容。
  • 您可以通过多种方式与screencast进行交互:
  • 点击会翻译成触碰,在设备上触发正确的触摸事件。
  • 计算机上的按键被发送到设备。
  • 要模拟捏合手势,请Shift在拖动时按住。
  • 要滚动,请使用触控板或鼠标滚轮,或使用鼠标指针滑动。
  • 关于屏幕录像的一些注意事项:
  • 屏幕录像仅显示页面内容。截屏的透明部分表示设备界面,例如Chrome浏览器多功能框,Android状态栏或Android键盘。
  • 屏幕录像对帧速率有负面影响。在测量卷轴或动画时停用屏幕播放功能,以便更准确地了解您的网页的效果。
  • 如果您的Android设备屏幕锁定,您的screencast的内容消失。解锁Android设备屏幕以自动恢复屏幕录像。

使用Google浏览器做真机页面调试相关推荐

  1. xcode7中,无需证书即可进行真机编译调试!

    iOS开发总是面临一个问题,借不到机器进行测试,自己的机器又不能使用.每到这个时候我都在想,苹果什么时候给力一点? 现在,苹果终于给力了!Xcode7全新特性来袭,下面为大家介绍: 无需证书的真机编译 ...

  2. 鸿蒙真机运行调试步骤

    鸿蒙真机运行调试问题 在真机调试时需具备三个文件才可运行,网上有很多教程指导大家如何运行,在这我将详细对步骤说明如下: 第一步: 在DevEco Studio开发工具上生成P12文件 点击按钮new生 ...

  3. 华为android studio调试,Android Studio 真机无线调试

    Android Studio 真机无线调试 1. 请将手机和电脑连接到同一局域网内(即同一个wifi). 2. 准备一台手机,打开开发者模式,用数据线连接至电脑,打开终端,输入命令 adb devic ...

  4. android wifi 无法连接电脑连接,没有数据线,Wifi也能连接Android真机开发调试!彻底解决“无法识别的USB设备”等数据线连接问题!...

    8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 最近有点蛋疼的是,不知道是数据线坏了还是电脑还是手机的问题,手机用USB数据线连电脑始终不行,插上去就提示"无 ...

  5. UWA Pipeline 2.0 功能详解|私有云真机远程调试

    UWA Pipeline 是一款面向游戏开发团队的本地协作平台,旨在为游戏开发团队搭建专属的DevOps研发交付流水线. 为帮助大家更好了解最新2.0版本中的各项新功能,我们将陆续为大家进行详解. 今 ...

  6. iOS - 真机无线调试

    真机无线调试步骤: 1.连接真机调试数据线,在Xcode工具栏,点击 Window -> Devices and Simulators 点击后显示: 选中Connect via network, ...

  7. 系统升级到10,xcode升到8,之后真机不能调试的问题

    打个广告:欢迎大家关注我的青少儿编程课堂,扫码就可以关注 问题:系统升级到10,xcode升到8,插上真机不能调试的问题 提示Development cannot be enabled while y ...

  8. Android开发-mac上使用三星S3做真机调试

    之前一直未使用真机进行Android开发,为准备明天的培训,拿出淘汰下来的s3准备环境,竟然发现无法连接mac,度娘一番找到答案,如下:mac 系统开发android,真机调试解决方案(无数的坑之后吐 ...

  9. flutter 真机无法调试 sdk报错_Flutter - 不一样的跨平台解决方案

    本文主要介绍Flutter相关的东西,包括Fuchsia.Dart.Flutter特性.安装以及整体架构等内容. 简介 Flutter作为谷歌推出的跨平台开发框架,一经推出便吸引了不少注意.关于Flu ...

最新文章

  1. Java 容器 泛型:一、认识容器
  2. 数据结构与算法实验祝恩_《数据结构与算法》实验教学大纲
  3. 解决npm下载包失败的问题
  4. python 列表生成器 获取文件列表
  5. HTML基础_Day02
  6. java字面量 方法区_(一)java的内存模型
  7. javaWeb服务详解(含源代码,测试通过,注释) ——Dept的Dao层
  8. Linux学习十七、正规表达式练习题
  9. ubuntu server自动关闭屏幕背景灯_certbot-auto申请https证书,自动续期
  10. python全栈开发网络_Python 全栈开发:网络编程
  11. Linux策略性路由应用及深入分析(iproute2)
  12. 聊聊python文件
  13. 吉林大学计算机学院刘衍衍教授,周柚-吉林大学计算机科学与技术学院
  14. win8蓝屏错误代码DPC_WATCHDOG_VIOLATION您的电脑遇到错误需要重启修复
  15. 如何找mysql8.0的rpm安装包_centos7上mysql8.0rpm方式安装
  16. 反射:集合泛型的本质
  17. SQL2000中文版打不上SP4提示用户验证没有通过
  18. 向上的箭头 html,HTML中利用div+CSS实现简单的箭头图标
  19. VHDL——含异步清零和同步使能的加法计数器源程序
  20. 啊哈C——学习3.7一起来找茬

热门文章

  1. 如何将nii图像文件转换为png图像,亲测有效!!!
  2. ios点击推送闪退_苹果是应用闪退打不开怎么办
  3. GEA 4.5比较各种旋转表达方式
  4. 【iOS】基于Realm数据库的记账软件--时间线模块(三)
  5. php gif裁剪,ci裁剪gif图片如何让gif保持是动态的。
  6. VS Code修改系统界面和编辑面板字体大小
  7. 兔子与狐狸c语言,【狐狸和兔子的故事】_ 狐狸和兔子故事_亲亲宝贝网
  8. 【PV操作】买面包的叫号算法(存疑)
  9. STM32输入捕获实验
  10. Verilog-时序电路设计