首页 > 其他 > 详细

Weinre远程调试工具

时间:2016-03-03 22:43:05      阅读:334      评论:0      收藏:0      [点我收藏+]
1.Weinre是什么?
Weinre全称 WeInspector Remote,是一个简单好用的远程调试工具。我们可以在自己的PC上修改对应网页的页面元素、样式,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息。举个栗子:当我们访问云课堂的购物车页面时,页面如下图所示,当我设置课程卡片的样式:background-color:red后,手机上实时显示了修改后的样式,下面的附图展示了实时的调试过程。
技术分享       技术分享
 
2、Weinre组成原理

Weinre远程调试工具由一下几部分组成:

  • 目标页面(target):也就是调试的页面,页面中需要嵌入weinre提供的远程js,这里的js相当一个锚点作用,后文会提到;
  • 服务端(agent):一个HTTP Server,为目标页面与客户端建立通信;
  • 客户端(client):本地的Web Inspector调试客户端。
3、安装及运行Weinre
Weinre支持Windows与Mac(Weinre是运行在java环境下的,请确保机器上有正确的java运行环境),以前Weinre是用安装包安装的方式,现在Weinre 也发布到 NPM 上了。

首先安装 Weinre:

npm install -g weinre
安装完成之后,在本地开启一个监听服务器,获取本机的局域网地址:10.240.154.164,这时候执行如下命令开启:
weinre --boundHost 10.240.154.164

【PS】Weinre 提供了6个可选的启动参数,常用的是以下两个参数,其它的用默认值就可以了。

  • httpPort 调试服务器运行的端口,默认的 8080,如果这个端口有在用,可以改为其它端口;
  • boundHost 调试服务器绑定的 IP 地址(或域名),默认 localhost,如果设置为 -all-,表示绑定到所有当前机器可以访问的接口。
weinre --boundHost -all-
 
技术分享
访问http://10.240.154.164:8080,出现以下页面,说明安装成功!
 
技术分享
按照页面中的提示,将Target Script中给的地址放到你需要调试的页面中,然后访问debug client(上图第一个红框中的地址)。访问后,我们能够看到一个类似于chrome控制台的东西出现了,这个时候,你就可以随心所欲调试啦!同时,注意到Targets中标明了现在调用远程Weinre js的页面
 
技术分享
这个时候尝试改变页面的一些样式,立即会在手机上呈现出来。
技术分享
其实,这个时候用Fiddler抓包,我们能看到来自于target、client的请求
技术分享
【PS】利用Weinre也能在console里面查看js的变量,这一点非常方便。

Weinre远程调试工具

原文:http://www.cnblogs.com/shytong/p/5240137.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!