钉钉开发笔记(六)使用Google浏览器做真机页面调试
注:
参考文献:https://developers.google.com/web/
部分字段为翻译文献,水平有限,如有错误敬请指正
步骤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浏览器做真机页面调试的更多相关文章
- 钉钉开发笔记(6)使用Google浏览器做真机页面调试
注: 参考文献:https://developers.google.com/web/ 部分字段为翻译文献,水平有限,如有错误敬请指正 步骤1: 从Windows,Mac或Linux计算机远程调试And ...
- 使用Google浏览器做真机页面调试
步骤1: 从Windows,Mac或Linux计算机远程调试Android设备上的实时内容.本教程将教您如何: 设置您的Android设备进行远程调试,并从开发机器中发现它.从您的开发机器检查和调试A ...
- Android开发-mac上使用三星S3做真机调试
之前一直未使用真机进行Android开发,为准备明天的培训,拿出淘汰下来的s3准备环境,竟然发现无法连接mac,度娘一番找到答案,如下:mac 系统开发android,真机调试解决方案(无数的坑之后吐 ...
- Django开发笔记六
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.登录功能完善 登录成功应该是重定向到首页,而不是转发 ...
- wp8开发笔记之应用程序真机发布调试
写在前面的话: 相信很多和我一样关注wp8动态以及已经开发了一些wp8应用程序的朋友们都遇到过这样的问题,写的程序在模拟器上进行调试总是显的没什么说服力,想拿真机进行实际测试, 该怎么办才好呢? 进行 ...
- [IOS]从零开始搭建基于Xcode7的IOS开发环境和免开发者帐号真机调试运行第一个IOS程序HelloWorld
首先这篇文章比较长,若想了解Xcode7的免开发者帐号真机调试运行IOS程序的话,直接转到第五部分. 转载请注明原文地址:http://www.cnblogs.com/litou/p/4843772. ...
- 从零开始开发iPhone,教你如何在真机调试iPhone应用程序
对于真机调试,首先要在苹果网站上注册APP ID,以及购买iPhone Develop Program(iDP) 开发者授权,99美元.然后要创建证书请求CSR,创建步骤如下:设置OCSP和CRL为关 ...
- 微信小程序开发——微信小程序下拉刷新真机无法弹回
开发工具中下拉之后页面回弹有一定的延迟,这个时间也有点久.真机测试,下拉后连回弹都没有,这个问题要解决,就得在下拉函数里加上停止下拉刷新的API,如下: /** * 下拉刷新 */ onPullDow ...
- 安卓开发笔记(二十):利用夜神模拟器调试运行Android Studio的apk
一.首先来到夜神模拟器的安装目录下 如下图所示: 再把这整个文件夹添加到我们的windows环境变量里.然后再把android studio 和夜神模拟器都打开,注意必须同时打开而且不能够把夜神模拟器 ...
随机推荐
- DB time VS. DB CPU
如何行之有效地展示系统负载在做系统调优的时候是必不可少的技巧.通常我们会使用Oracle提供的Time Model,比如我们需要作出类似于下面这样的趋势图来展示系统负载的高低. 这样的趋势图可以直接使 ...
- c# winform委托的使用
可参考http://bbs.csdn.net/topics/390377875中使用new Action<>的使用方式,替代delegate的申明. public delegate voi ...
- RK3288 OTG切换为Host模式
OTG = On The Go,是USB的一种工作模式 USB协议中规定了两类设备,一类是Host.一类是Device. Host为主控设备,如PC,Device为从设备,如鼠标.U盘等,Device ...
- cx_Oracle.DatabaseError: ORA-12541: TNS:no listener
问题:利用Python连接Oracle时报错,完整过程如下 import cx_Oracle conn = cx_Oracle.connect('testma/dingjia@192.168.88.1 ...
- 视频编解码---x264用于编码,ffmpeg用于解码
项目要用到视频编解码,最近半个月都在搞,说实话真是走了很多弯路,浪费了很多时间.将自己的最终成果记录于此,期望会给其他人提供些许帮助. 参考教程: http://ffmpeg.org/trac/ffm ...
- Java垃圾回收机制和内存分配
收集算法是内存回收的方法论,垃圾收集器是内存回收的具体实现 自动内存管理解决的是:给对象分配内存 以及 回收分配给对象的内存 为什么我们要了解学习 GC 与内存分配呢? 在 JVM 自动内存管理机制的 ...
- App切图命名规范
转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和 ...
- 个人关于python装饰器的白痴理解
无参数装饰器 对于python小白来说,python的装饰器简直让人懵逼,不知如何理解,其实按照装饰器的字面意思, 就是把自己定义的函数装饰一遍,然后返回一个新的函数(注意是新的,已经不是本来定义的函 ...
- NLTK与自然语言处理基础
NLTK (Natural Language Toolkit) NTLK是著名的Python自然语言处理工具包,但是主要针对的是英文处理.NLTK配套有文档,有语料库,有书籍. NLP领域中最常用的一 ...
- django之设置分页
分页 Django提供了一些类实现管理数据分页,这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int):返回分页对象,参数为列表数据, ...