Weinre远程调试工具

1.Weinre是什么？

Weinre全称  Web  Inspector  Remote，是一个简单好用的远程调试工具。咱们能够在本身的PC上修改对应网页的页面元素、样式，或是查看Javascript变量，同时还能够看到手机上页面的错误和警告信息。举个栗子：当咱们访问云课堂的购物车页面时，页面以下图所示，当我设置课程卡片的样式：background-color：red后，手机上实时显示了修改后的样式，下面的附图展现了实时的调试过程。

       

 

二、Weinre组成原理

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

• 目标页面（target）：也就是调试的页面，页面中须要嵌入weinre提供的远程js，这里的js至关一个锚点做用，后文会提到；
• 服务端（agent）：一个HTTP Server，为目标页面与客户端创建通讯；
• 客户端（client）：本地的Web Inspector调试客户端。

三、安装及运行Weinre

Weinre支持Windows与Mac（Weinre是运行在java环境下的，请确保机器上有正确的java运行环境），之前Weinre是用安装包安装的方式，如今Weinre 也发布到 NPM 上了。

首先安装 Weinre：

npm install -g weinre

安装完成以后，在本地开启一个监听服务器，获取本机的局域网地址：10.240.154.164，这时候执行以下命令开启：

weinre --boundHost 10.240.154.164weinre --boundHost 10.240.154.164

【PS】Weinre 提供了6个可选的启动参数，经常使用的是如下两个参数，其它的用默认值就能够了。

• httpPort 调试服务器运行的端口，默认的 8080，若是这个端口有在用，能够改成其它端口；
• boundHost 调试服务器绑定的 IP 地址（或域名），默认 localhost，若是设置为 -all-，表示绑定到全部当前机器能够访问的接口。

weinre --boundHost -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的变量，这一点很是方便。