我们在做基于html5开发,或者手机跨平台方案时,总是会用到Phonegap, JQuery mobile, XUI, Jqmobi, Sencha Touch,JQuery Touch,等,这些都是前端开发的方式,我们不得不去跟前端工程师一样,去进行前端调试,但是Fire Fox + Firebug 或者Chrome开发者工具是常用的方前端方法,但这些方法一用到Phonegap等方案上却遇到了最大的问题,跨域访问,于是我们不得不另辟蹊径。
是什么呢?Dreamweaver CS6.5以上的版本的移动支持?那只是一个美丽的幻想。呵呵
我们回到前端调试的另一个利器,因为别的工具太少,我们不得不被迫称之为“神器”----Weinre (WEb INspector REmote)
步骤如下:
1.Weinre环境搭建:
以前用它时还好,可以下载jar包在java环境下运行,现在不行了,github上下载的要用了NodeJS环境来运行,什么?你不知道什么叫NodeJS?作为了下前端开发工程师,这是一个罪过,因为这个东西的出现,可以让精通js的前端工程师们直接跨入高并发网站的开发中去,呵呵,书归正传,这里介绍windows下环境搭建。
网上下载NodeJS安装环境,进行安装。安装完成后,利用NodeJS的模块管理工具NPM从NodeJS的模块仓库中下载Weinre,看到这里,大家一定想起了linux上的apt-get,yum,及项目工具maven的组件仓库。
在NodeJS的命令行环境下,直接npm -install weinre就搞定了一切,简单吧?:) 然后,你就可以在NOdeJS的node-modules\.bin目录下找到weinre.cmd命令,执行它,可以设定一个主机绑定参数比如--boundHost=192.168.1.100,好了,weinre环境好了。其实就是启动了一个web服务,中介代理传输调试浏览器与移动设备中浏览器中的数据,从页可以周期性沟通数据。
如果你觉得自己搭建环境麻烦,也可以用公网上已搭建好的weinre服务,只是速度慢得让你想跳楼:)
2.使用weinre:
打开一个webkit内核的浏览器比如Chrome.打开http://192.168.1.100:8080/client#abcdefg (abcdefg这是一个标识id只要与移动设备里加入的脚本所指向的id一致就行了)。
在移动设备的启动页面的js中,加入如下内容 <script src="http://192.168.2.100:8080/target/target-script-min.js#abcdefg"></script>
3.调试:
在移动设备中运行启动页面。在Chrome中就可以进行调试了。
对weinre的更多讲解可以参考网上的一些资料:http://www.donglongfei.com/2012/03/debug-phonegap-app-using-weinre/?utm_source=rss&utm_medium=rss&utm_campaign=debug-phonegap-app-using-weinre