如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug、web inspector),重新设计界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。

Weinre是什么?

Weinre代表We b In spector Re mote,是一种远程调试工具。举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子,通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。

图1: 桌面的debug客户端与手机上的对应页面

使用一种工具之前,了解它的原理和结构是很有帮助的。Weinre作为一种远程调试工具,在结构上分为三层:

  • 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;
  • Debug客户端(client):本地的Web Inspector调试客户端;
  • Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。

三层结构如下图所示:

图2:Weinre组成结构

Weinre的debug客户端是基于Web Inspector开发,而Web Inspector只与以WebKit为核心的浏览器兼容,所以Weinre的客户端只能用Chrome或者Safari打开。

运行Weinre

首先需要下载 weinre, weinre目前支持Windows与MacOS, 本文中以Windows版为例。 下载完成之后,启动weinre的Debug服务端。在下载的weinre.jar所在文件夹中运行以下命令:

java -jar weinre.jar --httpPort 8081 --boundHost -all-

这行命令在本机启动了weinre的Debug服务端,端口为8081。打开Chrome或Safari,访问localhost:8081,就可以看到weinre的基本信息。(设置boundHost为-all-,就可以通过IP访问Debug服务端,这点很重要)

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

如何让网页可以被localhost:8081上的weinre检测到呢?很简单,只要往网页面上添加一个js文件就可以了。如果本机的IP为192.168.0.5,那么就添加如下的js文件。target-script.js可以获得从Debug服务端传来的信息,更改当前页面的样式;也可以运行传来的js,并返回结果。

<script src="http://192.168.0.5:8081/target/target-script.js"></script>

注意,对于dojo这样的异步加载模块,上面的静态嵌入的js就会不兼容,在有dojo等异步加载模块的环境下,请在异步加载全部完成后加载target-script.js

dojo.addOnLoad(function(){
    ...
    dojo.create("script",{
     src: "http://192.168.0.5:8081/target/target-script.js"
    }, dojo.body());
   })

打开添加了这个脚本的网页后,可以看见在Debug 的客户端的里检测到了新的目标页面。

之后我们就能在Elements与Console中调试远程的页面了。

Debug客户端中对应的HTML元素:

同时也可以查看js对象:

转载来源:http://blog.csdn.net/dojotoolkit/article/details/6280924

转 Web移动应用调试工具——Weinre的更多相关文章

  1. Web移动应用调试工具——Weinre

    如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...

  2. Web移动应用调试工具——Weinre

          如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebu ...

  3. 很有用的mobile web application远程调试工具 weinre

    在移动web应用中,因为没有类似chrome和firebug的调试工具,调试起来比在PC上相对麻烦一些,有时候仅仅能重复进行改动比对,但使用weinre我们能够轻松做到远程调试的功能. 什么是wein ...

  4. 发现一款移动web端远程调试工具weinre , 哈哈!

    之前调试一直用的是chrome的远程调试,虽然效果很不错,但是在调试cordova,微信时多有不便. 在git上找工具时发现了这个:weinre,使用方法非常简单 附上git地址: https://g ...

  5. Mobile Web调试工具Weinre (reproduce)

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

  6. 移动前端调试工具-Weinre真机调试

    之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移 ...

  7. webapp调试工具weinre的使用

    在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某 系统浏览器下页面怎么怎么滴.看着满满的测试汇总文档,我们曾经 ...

  8. H5调试工具 - weinre远程调试工具

    weinre 简介 weinre 是一款类似于firebug 和Web Inspector的网页调试工具, 它的不同之处在于可以用于进行远程调试,比如调试手机上面的网页. 安装 weinre(运行在n ...

  9. 移动端调试工具weinre

    前段时间在大豹公众号上看到一个关于移动端调试的工具,了解了一下,确实不错. npm install -g weinre 先全局安装,然后使用的时候通过如下命令启动 weinre --boundHost ...

随机推荐

  1. DNS原理及其解析过程【精彩剖析】(转)

      2012-03-21 17:23:10 标签:dig wireshark bind nslookup dns 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否 ...

  2. [codeforces 325]B. Stadium and Games

    [codeforces 325]B. Stadium and Games 试题描述 Daniel is organizing a football tournament. He has come up ...

  3. 对target="framename"的理解(实现分页的demo)

    先上图,说明一下我主要想实现什么功能. 一.演示图 演示首页: 演示内容页(包括按钮切换页+模板内容页): 演示首页到演示内容页的一个演变过程:

  4. linux tar文件解压

    把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个, ...

  5. 基于贪心算法的几类区间覆盖问题 nyoj 12喷水装置(二) nyoj 14会场安排问题

    1)区间完全覆盖问题 问题描述:给定一个长度为m的区间,再给出n条线段的起点和终点(注意这里是闭区间),求最少使用多少条线段可以将整个区间完全覆盖 样例: 区间长度8,可选的覆盖线段[2,6],[1, ...

  6. git无法clone远程代码库及git代理设置

    git作为一个版本管理神器,日常工作中自然也就少不了了:特别是Android开发,github和google是逃不过的了.然而很多时候需要用到git克隆远程的代码库,众所周知的原因google.and ...

  7. iOS7 和 iOS6的页面兼容问题

    ios7 的status bar变透明了,各个bar也透明了,一个controller的view占据了整个屏幕.怎么调整呢?基本的思想是把内容的坐标下移.如果仅仅把内容的y坐标下移,那么在ios6上显 ...

  8. mybatis配置文件xml中插入新数据

    初用mybatis,发现很好的一个操作数据库的框架,里面有一些小技巧,挺简单,很实用,记录一下: mybatis的插入语句: <insert id="insertAsset" ...

  9. ThreadGroup分析

    本文为转载:http://sunboyyyl.blog.163.com/blog/static/2247381201211531712330/ 在Java中每一个线程都归属于某个线程组管理的一员,例如 ...

  10. 转:JavaScript事件冒泡简介及应用

    (本文转载自别处) JavaScript事件冒泡简介及应用   一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...