使用 Html和Js 开发Web App 最头疼的事情是什么? 是调试
不同的设备, iOS, Android 上调试,想起来就头大, 不说问题, 就是每次修改后 在设备上浏览就一件大问题, 例如我有5个iOS iPhone4, iPhone4S, iPad1,2,3.
最笨的方法是每次psd 或 html 修改都要复制到设备上浏览, 或者高级点可以通过浏览器访问本地服务器localhost浏览, 但是即使用浏览器浏览也要在5个设备上点一下刷新. 如果在加上android设备 每次点刷新的时间都累死你.
Adobe Shadow 就是为了解决这个问题的开发神器, 使用Shadow后 你在电脑chrome浏览器上看到的页面会自动同步到你的所有移动设备上, 不需要你逐个设备点刷新, 请看牛叉的简介视频
http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow如何使用 Adobe shadow? 首先到shadow 官方页面
http://labs.adobe.com/downloads/shadow.html1 然后要下载服务器端版本 安装在桌面的电脑上
windows版本 仅支持 window7
http://labsdownload.adobe.com/pub/labs/shadow/shadow_r3_win_061812.msiMac OSX 版本 支持OS X 10.6 and 10.7
http://labsdownload.adobe.com/pub/labs/shadow/shadow_r3_mac_061812.dmg2 然后 给移动设备 要下载客户端
iOS 版本 直接在Apple store 下载
http://itunes.apple.com/app/adobe-shadow/id498621426Android 版本 直接在Google play 市场下载
https://play.google.com/store/apps/details?id=com.adobe.shadow.android (国内大部分手机可能没有安装google play 市场, 而且即使安装了play 市场 也有时要翻墙才能安装, 不过对于中国的开发者这些都是小case 否则当什么程序员,赶紧转行吧)
还有 Amazon 的
Kindle Fire 版本
http://www.amazon.com/Adobe-Systems-Shadow/dp/B007TN1OFG (不过国内有Kindle Fire的设备很少 忽略)
3 在电脑和手机都安装好后 还需要安装Chrome浏览的 Shadow 扩展程序
请用Chrome 打开 以下链接 安装
https://chrome.google.com/webstore/detail/ijoeapleklopieoejahbpdnhkjjgddemShadow最新版本为6月18日, 2012发布的第三个版本 不要安装错了
都安装好后 在Chrome 浏览器右上角会出现 Sd的小按钮
一切准备好后 我们首先运行电脑上的服务器端程序 如下图
然后运行手机上的Shadow 程序 如下图, 一般会自动搜索你的电脑上服务端, 但你可以点击右上角加号 自己添加你的电脑IP 这样比较好
连接上你的电脑后 手机会出现一串数字, 在打开你的Chrome浏览器 点击右上角Sd按钮 选择你的移动设备 然后输入数字即可.
这样你在Chrome上看到的任何网页都会自动在移动设备上看到,不用任何刷新
而且新版的Shadow还有截图功能 请看该视频
http://tv.adobe.com/watch/adobe-technology-sneaks-2012/labs-release-3-adobe-shadow如何在移动设备上截图并发到电脑上?
首先在手机或iPad 点击右上角图标,然后选择 Screenshot 截图
然后在Chrome 浏览器右上角点击照相机图标 这样把手机的截图传回到电脑上, 最后点击照相机右边的图标打开截图所在文件夹就可以查看截图了
而且不仅有图片 每张图片都对应一个TxT文本文件 记录了设备的名称,分辨率 系统版本和PPI, 真的很贴心
还有一个功能 照相机左边的按钮 是干啥的? 点击后可以自动清空所有移动设备的浏览器缓存,真是太方便了
在移动设备上 你可以通过网下拖拽页面 刷新缓存
最后该软件是免费的, 真是调试Web App最佳工具, 感谢Adobe.(什么时候Photoshop也能免费?)
