恒泰博远,专家级研发软件定制开发公司,为企业定制营销、办公、管理软件 在线咨询 :
咨询电话:010-82969001

远程调试工具 Weinre

来源:http://www.hengtaiboyuan.com 作者:恒泰博远 时间:2014-08-12

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

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

 

inspector),重新设计界面的工作往往事倍功半。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。

 

Weinre是什么?

 

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

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

 

运行原理

 

Weinre作为一种远程调试工具,在结构上分为三层:

 

1、目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;

2、Debug客户端(client):本地的Web Inspector调试客户端;

3、Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。

 

获取Weinre

 

在任何的支持 Node.js 环境的系统下通过包管理器(npm)即可安装Weinre

使用Weinre进行远程调试

 

1、 启动 WeinreDe bug 服务端

2、 通过PC浏览器(WebKit内核)打开 WeinreDe bug 客户端

3、 在你需要调试的页面加上通信用的脚本

4、 在手机上访问你的测试页面,在电脑上进入到 WeinreDe bug 客户端 看是否通信成功,如果一切没问题,可见到如下的页面

5、 最后跟你平时一样实时调试你的页面吧,是不是很爽。