Mobile Web调试工具Weinre

标签: mobile web 调试工具 | 发表时间:2014-07-20 22:20 | 作者:liuguofeng
出处:http://www.iteye.com

现在、将来,用移动设备上网越来越成为主流。但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。 

  Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等,下面就简单介绍下如何使用。下面以以Windows系统为例:

   一、首先确保你的电脑已经搭建好了java环境。即:安装了jdk。这里就不多说了,在网上搜个jdk,一步步安装及ok。

  二、 安装及运行Weinre

    1、下载: http://ishare.iask.sina.com.cn/f/23607399.html  ,这里直接下载jar包,下载好之后放在一个文件夹里就行不需任何处理。

      2、运行cmd,在weinre所在文件夹的 地址栏输入代码:java -jar weinre.jar --httpPort 8081 --boundHost -all-  (如下图):

      3、回车后会出现相应信息(注意:在调试过程中不要关闭cmd):

     4、打开本地浏览器,(使用webkit内核浏览器(chrome、safari))访问  http://localhost:8081/,不出意外的话可以看到weinre的基本信息。

     5、上图中的"debug client user interface"是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页。

  三、 添加Debug Target

    为了让需要调试的页面被weinre检测到,需要添加Debug Target,有两种方法:
     1、Target Script  

           该方法需要在调试的页面中增加一个 js

<script src="http://192.168.0.106:8081/target/target-script-min.js#anonymous" type="text/javascript">
</script>

    添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法

     2、Target Bookmarklet
    该方法是将一段js保存到移动设备的书签中,可以在 http://localhost:8081/ 找到这段js:

javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

    我将这段js保存到名为Debug书签中,然后使用移动设备访问我想要调试的页面,比如说 http://iinterest.net,最后点击Debug书签就OK了。

   四、真机调试。

    1、 移动设备须有有 wifi无线连接,且和电脑在同一网段,(确保本机安装了 服务器,可以到网上搜 xamppwamp,)把要调试的 页面放在服务器中相应的文件夹中,我安装的是xampp,所以放在htdocs目录下。在手机的页面中打开本页面的地址,如:http://192.168.0.102/index.html 。回到http://localhost:8081页面,点击“debug client user interface:”链接进入weinre的Debug界面,如果成功添加了Debug Target,这里可以看到它。

  2、接下来我们就可用自己熟悉的方式调试页面了,并且调试结果会实时显示在移动设备上

 

MAC系统更为简单,不用命令行,直接运行app即可启动weinre,接下来的步骤和windows一样。

 

参考:http://www.iinterest.net/2012/02/08/debugging-mobile-web-applications-with-the-weinre/



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [mobile web 调试工具] 推荐:

Mobile Web调试工具Weinre

- - 移动开发 - ITeye博客
现在、将来,用移动设备上网越来越成为主流. 但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛. 而Weinre就是解决这难题的利器.   Weinre的本意是Web Inspector Remote,它是一种远程调试工具. 功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等,下面就简单介绍下如何使用.

Web调试工具 Fiddler 教程

- - 互联网旁观者
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. Fiddler的基本介绍. Fiddler的官方网站:  www.fiddler2.com.

Mobile Web App发展现状及展望

- - 技术改变世界 创新驱动中国 - 《程序员》官网
在计算机的发展过程中,目前移动设备的时代可谓是潜力最大,发展最为迅猛,也是竞争最为激烈的一个时代. 硬件的发展速度令所有的消费者惊叹,如果2008年给你一部主频528MHz,内存192M,屏幕3.2寸,分辨率320*480的手机,你可能会觉得非常前卫,因为CPU和分辨率足够高. 而放到三年之后的今天,这部机器已经沦落到无人问津,成为古董机型的地步.

我拿什么来吸引你——Mobile Web Design

- Han - 所有文章 - UCD大社区
各式或华丽,或炫目,或让人迷惑,或让人叹服的Web Design已经愉悦我们很长很长的日子了. 可是,当有一天我们发现了一个新事物——用手机上网,在手机上看网页,我们看到了一种不一样Web,这种网页大家通常叫他们Wap页面,这种页面形式用简洁的视觉效果,清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求.

Web 前端优化最佳实践之 Mobile(iPhone) 篇

- - 可咔酷 | 网络杂货铺
Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则. 单个数据对象小于 25K (Keep Components under 25K). 这个似乎只是 针对 iPhone 研究的. 建议保持单个 Web 数据对象在 25 K 以下. Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M,但经过测试,发现也就是 25K 左右.

雷锋学堂:谈谈Mobile Web App的设计

- - 雷锋网
【编者按】本文作者:邓腾( @千年牛皮糖),百度无线交互设计师. 在本文中,作者将给大家谈谈Mobile Web App的设计方法,内容包括:Web App定义、Web App的特点、发展现状及设计等等. Native App与Web App的争论从未停息过,尽管很多人在批判Web App的各种不是,但也阻止不了各种各样的Web App如雨后春笋般出现,尤其是伴随智能手机的普及而受到重视的Mobile Web App.

mobilebone.js-mobile移动web APP单页切换骨架

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4381. 一、mobilebone.js吹牛不打草稿. mobilebone.js是鄙人2014下半年个人开源项目代表作. 先容我吹嘘一番,反正吹牛又不要交税. 跟传统网页浏览的差别仅仅在于无刷新. 例如,我们浏览首页,首页上有个如下HTML链接:.

一次开发,随处测试:Mozilla推出Web跨浏览器调试工具

- - 36氪 | 关注互联网创业
对于Web开发者来说,浏览器的兼容性是个大问题. 五花八门的浏览器种类和版本(包括移动版)导致应用的展示效果有时候各不相同,需要经过在各种浏览器场景下利用所附带的工具进行调试才能保证正常的呈现效果. 但是Mozill本周四 推出了Firefox Tools Adapter插件即将把Web开发者从转向苦差事中解放出来,它可以让开发者在Firefox浏览器内就能进行针对其他浏览器的调试.

使用 Dojo Mobile 为 iOS 智能终端开发 Native-like Web 应用

- jiaosq - IBM developerWorks 中国 : 文档库
随着 iOS 智能终端的流行,基于 iOS 开发 Native-like Web 应用变得越来越流行. 本文着重介绍基于 Dojo Mobile 开发 Native-like Web 应用的方法,并分享一些开发经验和技巧.

gdb调试工具

- - CSDN博客系统运维推荐文章
查看帮助一是man 命令,二是进入 www.gnu.org,找到gdb的帮助文档(更详细). gcc -Wall -g main.c -o main,只有这样才能产生调试信息,包括core的调试信息.     run(r)  运行,执行到断点,重新用r,表示重新开始执行.     list(l)  列出源代码,l 2,l main,l 2,16(数字表示行数).