跨平台测试利器Adobe Edge Inspect CC(安装与使用教程)

2015-10-17阅读(4337)评论(0)牵着狗狗看MM

苏州实时公交查询

随着移动端的普及,项目也越来越多的要求适应多种设备,之前调试的时候用Chrome自带的device mode,比较方便,但是与实际在多设备上的显示还是有差别的。
Adobe Edge Inspect CC插件是由Adobe公司开发的一款查看和调试手机等移动设备的工具,可以允许用户在不安装客户端的情况下通过Chrome插件来实现(如果你使用的是Adobe Brackets coding的话,也会有专门的插件,下面会介绍),使用起来非常的方便。

下载与安装Adobe Edge Inspect CC

下载地址:https://creative.adobe.com/zh-tw/products/inspect
打开下载地址,可能会弹出让你选择国家地区,这时关闭就好(如果打开上面链接,出来的直接是Adobe中国的官网,或者国家地区选择了中国,那就清除浏览器缓存后再打开)
然后登录Adobe ID后,会自动下载CreativeCloud,安装后从CreativeCloud中下载Adobe Edge Inspect CC。
安装完毕后,点击屏幕右下角的Adobe_Edge_Inspect_icon
这里我选择测试IOS
AdobeEdgeInspectCC-1
然后会打开Adobe Edge Inspect CC的APP下载地址,http://itunes.apple.com/app/id498621426(这里从手机APP STORE搜索下载Adobe Edge Inspect CC也是可以的)。

使用Adobe Edge Inspect CC

我现在要测试手机端上的效果。
打开手机上的Edge InspectAdobeEdgeInspectCC-2
进行如下操作:
AdobeEdgeInspectCC-3

方式一 :通过Chrome扩展连接

Chrome扩展连接下载:https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ijoeapleklopieoejahbpdnhkjjgddem
如果没有翻墙可以点击下载
安装完后打开Chrome,点击右上角Adobe Edge Inspect CC扩展图标,输入之前的连接码
AdobeEdgeInspectCC-4
连接成功后,手机端就会实时显示Chrome中当前网页在手机端的效果,如下图:
AdobeEdgeInspectCC-5

方式二 :通过Adobe Brackets插件连接

我平时是用Adobe Brackets写代码,出了Adobe Edge Inspect CC,Adobe对于自家的产品是肯定支持的。
打开Brackets的扩展管理器搜索安装Adobe Edge Inspect CC。这里安装过程就不说了。
点击Brackets右侧Adobe Edge Inspect CC插件
AdobeEdgeInspectCC-6
插件中提供,刷新、在设备上全屏显示、截图功能

注:Brackets中使用Adobe Edge Inspect CC插件,必须先打开 文件 → 项目设置,输入你本机搭建的WEB服务器地址(如http://192.168.0.102:8080),才能在手机上看到实时效果。

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 跨平台测试利器Adobe Edge Inspect CC(安装与使用教程)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏