惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
罗磊的独立博客
The GitHub Blog
The GitHub Blog
V
V2EX
Last Week in AI
Last Week in AI
博客园 - 聂微东
MyScale Blog
MyScale Blog
美团技术团队
L
LangChain Blog
博客园 - Franky
腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园_首页
S
SegmentFault 最新的问题
爱范儿
爱范儿
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Stack Overflow Blog
Stack Overflow Blog
量子位
小众软件
小众软件
宝玉的分享
宝玉的分享
J
Java Code Geeks
Google DeepMind News
Google DeepMind News
D
Docker
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报

博客园 - 岁月无声

Spring Boot(3)---自定义spring boot starter 问题 那就开始吧---写在2014年8月 基于CXF Java 搭建Web Service (Restful Web Service与基于SOAP的Web Service混合方案) 从操作系统机制浅谈服务器及服务平台方案的选择 Node.JS平台上的数据库Redis,MongoDB,HBASE,MySQL Node.JS 模块,包管理与开发 Node.JS进行简单新技术分析及环境搭建 MongoDB (1)---复制集与sharding安装配置 MongoDB (5)---不仅仅是数据库 MongoDB (0)---写在前面 NoSQL--MongoDB选择 云平台综述 物联网(1)----手机NFC识别方案平台 快速建立一个手机网站 由NodeJS浅谈无敌的前端开发工程师 PHP调试环境 大话网站---从Hello World到高并发网站 浅谈预演框架选择 最后的绝唱-----Symbian 最新的IDE开发环境搭建(Updated on 2011-03-07)
基于HTML5手机技术方案(如Phonegap)的调试方案
岁月无声 · 2013-02-16 · via 博客园 - 岁月无声

我们在做基于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