用weinre、fiddle、apache、jdk本地搭建移动设备远程实时调试环境
windows下用weinre、fiddle、apache、jdk本地搭建移动设备远程实时调试环境
最常用的实时开发调试工具firebug、web inspector、ie developer等,对前端开发者来说已经很熟悉了,在移动互联网越发火热的今天,作为一个新的前端开发环境, 前端开发者用pc独立开发已不能更高效的满足移动开发的需求, 而移动前端开发是比较新的一个开发分支, js、html5、css3没有像native client端的visual studio 、mac或大型手机厂商下那样统一成熟的模拟器开发环境或远程手机调试环境, web前端开发者大部分开发调试时只能通过代码上传至远程服务器,然后手机浏览器登录服务器,远程整页刷新看效果,pc上的webkit也不能100%模拟手机web环境。
于是调研了一下, 通过如题的各种工具搭建了一个windows上的前端开发环境。首先安装工具下载:
1. phpstudy:一键安装web server各种环境的工具,个人推荐感觉非常快速方便http://phpstudy.softonic.cn/
2. fiddle: http://www.fiddler2.com/fiddler2/version.asp
3. jdk:http://www.java.com/en/download/index.jsp
4. weinre:http://ishare.iask.sina.com.cn/f/23607399.html 这里直接下载jar包,得说一下,jar包在官方的连接坏了 http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/Installing.html ,用git clone在github下载的话,还得配jvm或shell编译环境,不如直接jdk执行jar方便。
安装好apache和jdk,打开window console(win+R 命令cmd)找到weinre.jar的目录,敲入如下命令并回车:
java -jar weinre.jar --httpPort 1070 --boundHost -all-
打开本地浏览器,输入本机在局域网的ip(例10.208.66.65),端口为1070
这样远程移动的服务器就配好了, 打开 http://192.168.0.1:1070/client/#anonymous 如图:
这就是weinre的远程调试器, 跟webkit的web inspector一样,“Targets”为你的远程移动设备,没有连接显示为none。
接下来usb连接移动设备,本人连的iphone4(要求移动设备有wifi无线连接,且最好同一网段,如果不在,关闭windows防火墙,保证能ping通移动设备。
拿出要调试的页面文件index.html,页面中插入
http://10.208.66.65:1070/target/target-script-min.js#anonymous
,放至web server的WWW目录下。
在手机的页面中打开http://10.208.66.65/index.html ,这样pc上可以显示target了:
如上图就代表远程联通手机,可以远程实时调试如下:
![](http://u1.sinaimg.cn/upload/mued/04.gif)
fiddle远程配置:
打开fiddle -tools》option》connection》allow remote computer勾选上, 端口设为8888并重启:
![](http://u1.sinaimg.cn/upload/mued/05.gif)
打开iphone的设置》wifi》当前wifi接入点滑动到最下, http代理选手动,输入本机ip,端口为fiddle的8888:
到此weinre和fiddle就结合部署完毕, 刷新手机上的 http://10.208.66.65/index.html
weinre可以实时进行类似firebug的可视化开发
fiddle的优点就不用说了, 用过都知道, 如果apache是远程server,那还可以用fiddle的AutoResponder截断外联文件本地开发。推荐两篇fiddle基础教程:
使用Fiddler提高前端工作效率 (介绍篇)
http://www.aliued.cn/2010/04/25/use-fiddler-to-improve-efficiency-of-front-development-example.html
ps:注意事项
此方法配置的weinre,无线设备可以不接usb 直接wifi调试;
目前weinre只支持ios3.13和android2.x以上可视化调试;
fiddle目前端口会冲突,只能配置usb有线;(wifi有兴趣可以调研下);
fiddle可以截取所有手机访问无线的信息,这样只要远程server跟智能机所有native app和web app通信,基本都可以模拟;
另外一些远程开发的工具也不错, chrome的ripple和adobe shadow的插件,可在pc上做移动web app模拟器, apple safari yslow等。
另外就是nodejs做的一款叫socketbug的远程工具,官网意思是用了它做无线互联网开发,基本就除了js,没有其它语言和工具环境什么事了, 有兴趣可以看看。
抛砖引玉,欢迎讨论分享
此条目是由 survivor 发表在 未分类 分类目录的。将固定链接加入收藏夹。