zoukankan      html  css  js  c++  java
  • 基于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中就可以进行调试了。

    对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

  • 相关阅读:
    Union用法及说明:
    SQL用了Union后的排序问题
    10条PHP编程习惯助你找工作
    PHP性能分析工具xhprof的安装使用与注意事项
    11款数据分析工具(附体验网址)
    Linux下的库操作工具-nm、ar、ldd、ldconfig和ld.so
    ldd显示可执行模块的dependenc
    计算机图形学,三维框架设计
    dnat,snat
    百度识图API
  • 原文地址:https://www.cnblogs.com/windwithlife/p/2912961.html
Copyright © 2011-2022 走看看