基于HTML5手机技术方案（如Phonegap）的调试方案

我们在做基于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中就可以进行调试了。

posted @ 2013-02-16 23:37 岁月无声阅读(4798) 评论(1) 编辑收藏举报

刷新页面返回顶部

windwithlife

基于HTML5手机技术方案（如Phonegap）的调试方案

公告