如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。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. Linux / UNIX create soft link with ln command

    How to: Linux / UNIX create soft link with ln command by NIXCRAFT on SEPTEMBER 25, 2007 · 42 COMMENT ...

  2. linux 使用 ionice 限制 Xen 虚拟机磁盘 IO

    作为 VPS 服务商我们需要保证每个 VPS 公平的使用 host(服务器)的资源,避免某个 VPS 因为程序死循环.挂起.滥用等因素 “拖累” 其他 VPS,如果出现这个情况如何临时限制这个 VPS ...

  3. webdriver+python 对三大浏览器的支持

    1.在IE浏览器上运行测试脚本,首先需要下载IEDriverServer.exe(http://code.google.com/p/selenium/downloads/list,根据浏览器的版本下载 ...

  4. codeforces A. Vasya and Digital Root 解题报告

    题目链接:http://codeforces.com/problemset/problem/355/A 题目意思:找出某个经过最多四次dr(n)操作等于d的k位数.   千万不要想得太复杂,想得越简单 ...

  5. Cocos2d-JS场景树

    场景树概念(Scene Graph) 场景树是Cocos2d-JS中用来管理场景中所有元素的一个数据结构,场景树之所以被称为一棵树是因为它将一个场景的所有子结点以树状图的形式组织在一起. Cocos2 ...

  6. [Android Pro] 超能RecyclerView组件使用

    RecyclerView最强大的功能在于秒变功能,只需要改动很少的代码就可以实现ListView,GridView及水平ListViw的切换功能 public class MainActivity e ...

  7. stm32学习笔记----双串口同时打开时的printf()问题

    stm32学习笔记----双串口同时打开时的printf()问题 最近因为要使用串口2外接PN532芯片实现通信,另一方面,要使用串口1来将一些提示信息输出到上位机,于是重定义了printf(),使其 ...

  8. linux常见问题集锦

    本文转自 http://bbs.chinaunix.net/thread-3668921-1-1.html,在此感谢作者分享 一.填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. ...

  9. innobackupex err2

    报错: [root@DB dbdata]# innobackupex --defaults-file=/etc/my.cnf --user=root --password=123 /data/dbda ...

  10. CentOS下源码安装mplayer播放器

    http://www.mplayerhq.hu/MPlayer/releases/ [root@ok MPlayer-1.2.1]# pwd /root/MPlayer-1.2.1 http://ww ...