使用 Weinre 调试移动网站及 PhoneGap 应用

标签: weinre 调试 移动 | 发表时间:2013-06-19 09:51 | 作者:梦想天空(山边小溪)
出处:http://www.cnblogs.com/lhb25/

  在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用。但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了。因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具。 Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用。


您可能感兴趣的相关文章


 



 


Weinre 简介


  在使用 Weinre 之前,我们先了解一下 Weinre 的基本概念。 Weinre 的全称是 Web Inspector Remote(远程 Web 调试工具),功能和 Firebug、Webkit Inspector 类似,可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用,能够即时调试 DOM 元素、 CSS 样式 和 JavaScript 等。


  使用 Weinre 的目的是调试运行在移动设备浏览器内的 Web 站点或者应用,我们称这个移动设备即为调试目标(Debug Target)。由于在移动设备上直接进行调试操作不便,Weinre 帮助我们使用桌面传统的 webkit 环境(比如 Web Inspector 或者 Google Chrome 的开发者工具)来进行调试,我们称这个桌面调试环境为调试客户端(Debug Client)。


 



 


  Weinre 为了能够同步桌面的调试客户端和移动设备上的调试目标,需要你搭建一个调试服务器(Debug Server)。因此,在使用 Weinre 进行远程设备调试时,包含了上面的三种元素:



  • 调试服务器:调试服务器起到代理的作用,用来同步调试目标和调试客户端之间的命令;

  • 调试客户端:这是 Web Inspector 界面,即开发者在浏览器中进行调试的界面;

  • 调试目标:需要调试的页面,也指用于运行被调试 Web 内容的的浏览器所在的移动设备。


  Weinre 的调试目标和客户端都运行在浏览器中,而调试服务器则以 HTTP 服务器方式作为二者的中介运行。在 Patrick Mueller 关于 Weinre 的手册中,解释了这种关系。更详细的解释可见: http://muellerware.org/papers/weinre/manual.html


Weinre 的安装和运行


   Weinre 的调试服务器是基于 Node.js 实现的,因此在安装 Weinre 之前先要安装 Node 运行环境。安装 Weinre 有两种方式,使用 npm 或者下载二进制文件进行安装。


  使用二进制包安装的命令如下:



npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz    


  还可以通过 Node 包管理工具安装:



npm -g install weinre    


  



 



 


  安装好以后就可以启动 Weinre 了,Weinre 提供了6个可选的启动参数,其中下面两个参数一般会修改,其它的用默认值就可以了。



  • --httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;

  • --boundHost 调试服务器绑定的 IP 地址,也可以是域名,默认是 localhost,还可以设置为 -all-,表示绑定到所有当前机器可以访问的接口。如下所示:



weinre --boundHost -all-


   这些配置也可以在 Weinre 根目录下创建 server.properties 文件配置,内容如下所示:



boundHost:    -all-    
httpPort: 8081
reuseAddr: true
readTimeout: 1
deathTimeout: 5


  需要注意的是,命令行设置的参数会覆盖文件配置的参数。


Weinre 的使用


  成功启动 Weinre 后就可以使用绑定的 IP 或者域名加上端口访问 Weinre 服务器了(我们这里以 http://localhost:8081 为例)。在 Webkit 核心的浏览器(例如 Chrome、Safari 等)中打开 Weinre 服务器主页:



  在服务器主页有两项内容很重要:



  • A 链接到调试客户端页面,打开后默认到远程面板,如下图所示。

  • B 目标代码,这段代码要加入到需要调试的页面中,也可以用书签的方式动态加入。



  远程面板总共有四部分:



  • A 面板切换,用过 Chrome 或者 Safari  开发者工具的对这个界面肯定很熟悉。

  • B 连接到调试服务器的页面,即可以调试的页面。

  • C 连接到调试服务地的客户端,当前只有一个。

  • D 调试服务器属性,绑定的端口和调试服务器能够响应式的 IP 地址列表。


  远程面板以外,还有元素面板、资源面板、网络面板、时间线面板和控制台,后面这几个 Web 开发人员都很熟悉的,就不一一介绍了。







Weinre 支持的平台


  支持的调试客户端(运行调试界面的浏览器):



  • Google Chrome

  • Apple Safari

  • 其它基于 WebKit 的浏览器


  支持的调试目标(需要调试的网站或应用的界面):



  • Android 浏览器应用

  • iOS Mobile Safari 应用

  • PhoneGap/Cordova

  • other 


  不支持的调试目标:



  • iOS 3.1.3 及更早版本

  • webOS 1.45 及更早版本


 



本文链接: 使用 Weinre 调试移动网站及 PhoneGap 应用


编译来源: 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源


hide


本文链接

相关 [weinre 调试 移动] 推荐:

使用 Weinre 调试移动网站及 PhoneGap 应用

- - 博客园_梦想天空
  在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者. 但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了. 因此,移动开发人员都希望能有 Mobile 版本的 Firebug 或者 Chrome 开发人员工具. Weinre 就是这样一款工具,可以帮助我们调试移动网站及 PhoneGap 应用.

Mobile Web调试工具Weinre

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

H5 移动调试全攻略

- - IT瘾-dev
随着移动设备的高速发展, H5开发也成为了 F2E不可或缺的能力. 而移动开发的重中之重就是掌握调试技巧,定 Bug于无形. 文章首发于 Jartto’s blog,转载请标明出处. 因为移动端操作系统分为 iOS和 Android两派,所以本文的调试技巧也会按照不同的系统来区分.

PC远程调试移动设备 - Barret Lee

- - 博客园_首页
我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题——调试. 在 PC 机器上,我们有功能强大的 Chrome DevTools、Firebug,即便是老版本的 IE ,我们也可以安装微软提供的插件,对网页样式和请求信息轻松进行调试. 但在手机、平板上,很多人就无招可施了,一个劲的 alert 查看调试信息.

Log调试

- - ITeye博客
在开发中我们一定不能避免使用Log类,但是这个类存在一个问题就是,当你在程序中使用了大量的Log,那么在程序开发完毕的时候,这将是一个问题,因为,你需要将所有的Log记录注释掉(当然,你不注释也是可以的). 我们可以写一个类,将Log类包装起来,使用一个boolean来控制所有的Log记录的显示. public static final boolean isDebug = true;//这里控制所有Log的显示情况.

Python调试

- - 企业架构 - ITeye博客
原文地址: http://blog.csdn.net/xuyuefei1988/article/details/19399137. 1、下面网上收罗的资料初学者应该够用了,但对比IBM的Python 代码调试技巧:. IBM:包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试:.

前端调试技巧(PC调试)

- - 掘金 前端
前端工作中,不仅编码很重要,重现bug,解决bug的能力同样重要. 本文就一些调试技巧做出总结,不足之处,欢迎大家多多补充. 在你觉得有问题的代码处,加上一句 console.log() 就好了. 然后在开发者工具控制台就可以看到你打印出来的东西了. 在代码中添加 debugger 语句,当代码执行到该语句的时候就会自动断点.

远程调试Tomcat

- - ITeye博客
  这种情况下只能通过查看远程服务器上的log来调试,如果出现unknown source说明编译的时候没有加入行号的信息,按如下修改.   a)通过javac编译时,默认相当于指定-g:source,lines,这样编译出来的class文件中会包含源代码和行号信息.   b)而通过ant编译时,默认相当于指定-g:none,这样编译出来的class文件会比较小,但是不包含任何调试信息,所以出错的时候就会打印出unknown source.

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(数字表示行数).

python代码调试

- - 阿里古古
【转自: http://blog.csdn.net/luckeryin/article/details/4477233】. 本文讨论在没有方便的IDE工具可用的情况下,使用pdb调试python程序. 例如,有模拟税收计算的程序:. debug_demo函数计算4500的入账所需的税收. 在需要插入断点的地方,加入红色部分代码:如果_DEBUG值为True,则在该处开始调试(加入_DEBUG的原因是为了方便打开/关闭调试).