Weinre远程调试工具

1.Weinre是什么？

Weinre全称 Web Inspector 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的变量，这一点非常方便。