weinre调试环境搭建

网页问题分析过程中经常会遇到需要分析手机页面源码的情况，之前都是通过工具将手机上的网页另存为html文件，然后在PC上通过Chrome或Firfox进行网页结构分析。这种方式得到的相当于“二手”页面，希望能直接在PC上对手机页面的源码结构进行查看和分析，发现通过 weinre工具可以很好实现这一目标，现将环境搭建过程回顾如下。

一、工具准备

以下工具与本人使用的环境做介绍。

1. PC端Chrome浏览器（V 25.0.1364.97, PC为Win7系统，并安装了Cygwin);

2. 测试手机一部 (Nexus 4, android 4.2 platform)，内置Chrome浏览器;

3. Connectfy软件，用于将PC作为共享热点，通过无线方式将手机连接到PC，并可以共享上网。

通过ipconfig /all命令查记下PC的IP地址为192.168.196.1，输入*#*#4636#*#*进入手机的工程模式，记下其IP地址为192.168.196.101;

5. 安装Node.js作为weinre的运行时环境，当前版本为V0.10.4;

4. 下载weinre安装包. 作者是直接下载的二进制包，并在window下解压，解压位置无要求，作者解压到了D:\TDDOWNLOAD\weinre\apache-cordova-weinre-2.0.0-pre-HA5N9T49-bin。（官方介绍可通过npm方式安装，没试）。

二、调试环境准备

1. 从Cygwin进入解压目录，启动weinre调试服务器

./weinre --boundHost 192.168.196.1

默认绑定到8080端口，上面的IP地址为之前查询到的PC的IP，此时可以看到调试服务器已启动，如图1

图1 启动weinre调试服务器

其它配置参数可使用./weinre -h 命令查看到.

2. 此时在PC的Chrome浏览器中输入http://192.168.196.1:8080，可以看到weinre的介绍页面。从手机端的Chrome浏览器中进入http://192.168.196.1:8080，同样可以查看到相同的主页，如图2。

图2 weinre介绍界面

3. 在PC的Chrome浏览器中点击上述的debug client user interface连接，可以看当前调试服务器的相关信息，如图3。

图3 无调试目标时的状态

Target为none表示目前无调试网页连接到调试服务器。

4. 本地网页调试。

在手机端的Chrome中新开一个tab页面打开步骤2中的第一个Demo，此时可以看到该测试网页已和调试服务器建立连接，可在调试界面中的Remote面板中查看到相关信息,如图4，图5所示.

图4 已连接Demo测试页

图5 调试面板

上述Demo页面位于PC端的demo文件夹内D:\TDDOWNLOAD\weinre\apache-cordova-weinre-2.0.0-pre-HA5N9T49-bin\web\demo，所以对于其他本地调试页面，也可以放到该文件夹内进行调试，但不要忘了加入调试脚本.

<script src="http://a.b.c:8081/target/target-script-min.js"></script>

5. 在线网页调试。

关键是对在线调试的网页进行脚本注入，注入上述的调试脚本，这样才可以在调试界面中进行在线网页的调试。以百度主页(http://www.baidu.com)调试为例，步骤如下：

1). 在手机端的Chrome浏览器中按照步骤6的操作进行默认调试主页，并向下滑动到Target Bookmarklet部分，如图6所示。

图6 调试脚本注入

长按 weinre target debug连接并复制器连接地址。

2). 手机Chrome中浏览器中新开一个tab页，输入http://www.baidu.com, 加载百度主页并正常显示；

3). 在打开的百度tab页地址栏中粘贴上刚才复制的连接地址并进行加载，此时调试脚本已注入调试页面，可在Remote面板中看到百度页面已跟调试服务器建立连接，此时可通过相关面板查看百度页面信息，如图7所示。

图7 待调试的百度主页

强大的是在PC的Element面板内移动鼠标，对应的HTML元素会在手机端Chrome浏览器中高亮显示，跟用Chrome调试本地页面一样，非常棒！

对其它在线页面的调试也一下，先加载再注入调试脚本，关键是调试脚本的注入。试了几次官网上介绍的方法不行，默认粘贴<pre>和<textarea>中的脚本会直接加载该脚本内容，导致注入失败。