使用Adobe Edge Inspect在各种设备中轻松测试同一页面
有过移动网站开发经历的开发者都知道,在各种设备中测试同一页面是一项非常繁琐的工作。现在,我们可以使用Adobe Edge Inspect来简化这一工作。如果使用Edge Inspect,可以在各种设备的浏览器中同时浏览同一页面。另外,该软件中也提供了用于调试的工具,可以轻松调试页面上所存在的任何问题。Web网站所需支持的设备越多,使用Edge Inspect软件所能节省的时间及工作量也将越多。
本文介绍Adobe Edge Inspect的安装及使用方法。虽然Adobe Edge Inspect为Creative Cloud中的一个可以被免费使用的软件,但免费版中可以使用的功能也被受到了限制,可以同时连接的设备也仅限一台。如果要使用商业版Adobe Edge Inspect,需要注册为Creative Cloud成员,然后购买Adobe Edge Inspect产品。在商业版中,不对同时连接的设备数量进行限制。
安装
Adobe Edge Inspect的安装非常简单,分为以下三个步骤:
- 在PC机中安装Adobe Edge Inspect。
- 在Chrome浏览器中安装Adobe Edge Inspect CC扩展。
- 在各种设备中安装Adobe Edge Inspect客户端,可以安装的客户端包括iOS客户端、Android客户端与Kindle客户端。
在Adobe Edge Inspect(以下简称Edge Inspect)安装完毕后,可以通过如下所示的步骤使用该软件。
- 在PC机中启动Edge Inspect软件。
- 在设备中启动Edge Inspect客户端(免费版中只支持1台设备同时连接)。
- 当设备与PC机中位于同一网络中时,各设备的Edge Inspect客户端中的“Connections”列表中显示PC机名。
- 点击该PC机名,显示passcode。
- 打开PC机中的Chrome浏览器,地址栏右边显示代表Edge Inspect扩展功能的图标。点击该图标,面板中显示同一网络中的设备名称。点击设备名,输入该设备的passcode,并勾选右边的复选框后,设备与PC机即建立连接,在PC机中浏览测试网页,该网页将同步显示在设备中。
Chrome浏览器中的Edge Inspect扩展菜单(连接成功)
一旦设备与PC机建立连接之后,PC机中不需要再输入passcode。
请注意:如果使用VPN网络,PC中可能不能识别设备。
浏览功能
在Edge Inspect中浏览页面是非常轻松的一件事情。在PC机的Chrome浏览器中打开某个页面后,所有与PC机建立连接的设备中均显示同一页面。另外,在设备中的Edge Inspect中只显示Chrome浏览器当前标签中的内容。如果在Chrome浏览器中切换标签,在设备中的Edge Inspect中显示的内容也将被同步切换。
另外,在Edge Inspect中可以执行全屏浏览功能。在Chrome浏览器中,默认关闭Edge Inspect的全屏浏览功能。如果要执行全屏浏览功能,需要点击Chrome浏览器中Edge Inspect面板中的“show full screen on devices”图标,点击该图标之后所有连接设备中的顶端部分被隐藏,再次点击该图标,顶端部分将被显示。
在Edge Inspect中不仅可以浏览某个Web网站,也可以浏览运行在本地localhost服务器中的某个网站。
当然,在Edge Inspect中不能浏览通过“file:///”协议打开的文件,因为该文件并不存在于设备中。另外,在浏览需要使用密码登陆的网站时,需要在各设备中进行登陆。
另外,当需要在设备中刷新页面时,可以点击右上角的图标。另外,在Chrome浏览器的Edge Inspect面板中点击刷新按钮后,可以在所有连接设备中同时刷新页面。执行刷新功能后缓存也将被同时清除,将向服务器端发出一个新的访问请求。
调试功能
虽然目前介绍的功能均非常有用,但我们要重点介绍的是调试功能。点击Chrome浏览器的Edge Inspect面板中的连接设备名旁的“< >”按钮,将打开调试窗口,开始执行远程调试功能。该功能内部使用weinre(web inspector remote)功能。习惯于使用Chrome开发者工具的开发者们将对该功能非常熟悉。
内部使用weinre的调试窗口
在调试窗口中,可以执行DOM的显示与编辑功能。将DOM编辑之后,在设备中将实时显示编辑后的内容。另外,可以在调试窗口中观察控制台窗口中输出的日志,这是一个在调试HTML/CSS/JavaScript时非常有用的功能。
该调试窗口也存在一些局限性。例如在Console标签面板中只显示设备中点击按钮等事件触发时事件处理函数中输出的信息。另外,在对HTML/CSS/JavaScript代码进行编辑时,不可以追加新行,即没有Chrome开发工具中“Edit As Text”及“Edit As HTML”选项。
屏幕快照功能
在Edge Inspect中提供屏幕快照功能。该快照功能不仅针对某个连接设备,而且可以同时在所有连接设备中执行快照功能。在需要对所有连接设备进行快照功能时,可以在Chrome浏览器的Edge Inspect面板中点击照相机图标。点击后各设备中的快照将被传送到PC机中。点击照相机旁的文件夹图标,可以打开放置了各快照的文件夹。可以通过鼠标右击Chrome浏览器的Edge Inspect扩展功能后点击“选项”菜单项的方法修改该文件夹场所。
如果只在某个设备中进行快照功能,可以点击设备的Edge Inspect软件界面右上角图标后点击“Screenshot”。
目前快照内容仅限定于当前viewport中。因此,在拍照前将屏幕滚动或缩放后,快照内容仅限定于当前viewport中的内容。
另外,执行快照功能时,同时保存一个文本文件,该文件中记载了拍照时的页面URL、页面大小、设备操作系统、设备种类、像素密度。该功能在测试发生问题后检查问题原因时将变得非常有用。
使用Adobe Edge Inspect在各种设备中轻松测试同一页面的更多相关文章
- 移动WEB测试工具 Adobe Edge Inspect
要用到的内容: Adobe Edge Code CC https://creative.adobe.com/products/code?promoid=KFKML Adobe Edge In ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- Adobe Edge Animate –EdgeCommons Log和全局变量设置功能
Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...
- Adobe Edge Animate –使用EdgeCommons加载和播放音频
Adobe Edge Animate –使用EdgeCommons加载和播放音频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在Edge中,可以new一 ...
- Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换
Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频
Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
- Adobe Edge Animate –使用css制作菜单
Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:
随机推荐
- grep -v 排除多人字符串
# egrep -v '^$|^#' /etc/httpd/conf/httpd.conf # grep -v '^$\|^#' /etc/httpd/conf/httpd.conf
- wifi display代码 分析
转自:http://blog.csdn.net/lilian0118/article/details/23168531 这一章中我们来看Wifi Display连接过程的建立,包含P2P的部分和RTS ...
- tornado使用(Mac)
安装需求 Tornado 在 Python 2.5, 2.6, 2.7 中都经过了测试.要使用 Tornado 的所有功能,你需要安装 PycURL (7.18.2 或更高版本) 以及 simplej ...
- ASP.NET 5探险(4):如何把ASP.NET 5从beta4升级到beta5
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:上一篇文章讲述了ASP.NET 5 Beta带来的一些变化,虽然原文最后给出了从bet ...
- Java Thread join() 的用法
Java Thread中, join() 方法主要是让调用改方法的thread完成run方法里面的东西后, 在执行join()方法后面的代码.示例: class ThreadTesterA imple ...
- HDU 5900 QSC and Master 区间DP
QSC and Master Problem Description Every school has some legends, Northeastern University is the s ...
- 【框架】网络请求+Gson解析--Retrofit 2
其实内部是封装了Okhttp和Gson解析 public class CourseFragmentAPI { public static void get(String userId, BaseCal ...
- vmstat的使用(查看系统各种负载)
$ vmstatprocs -----------memory---------- ---swap-- -----io---- --system-- -----cpu------ r b swpd f ...
- 解决ScrollView嵌到listView冲突问题
方法一: 把下面的方法放在绑定适配器操作的下面就行. /** * 重新计算ListView的高度,解决ScrollView和ListView两个View都有滚动的效果,在嵌套使用时起冲突的问题 * @ ...
- Android拓展系列(12)--使用Gradle发布aar项目到JCenter仓库
目的 发布自己的android library(也就是aar)到公共的jcenter仓库,所有的人都能用gradle最简单的方式引用. 为什么选择jcenter,它兼容maven,而且支持更多形式仓库 ...