admin 管理员组文章数量: 1086019
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. 在线网页调试。
关键是对在线调试的网页进行脚本注入，注入上述的调试脚本，这样才可以在调试界面中进行在线网页的调试。以百度主页()调试为例，步骤如下：
1). 在手机端的Chrome浏览器中按照步骤6的操作进行默认调试主页，并向下滑动到Target Bookmarklet部分，如图6所示。
图6 调试脚本注入
长按 weinre target debug连接并复制器连接地址。
2). 手机Chrome中浏览器中新开一个tab页，输入, 加载百度主页并正常显示；
3). 在打开的百度tab页地址栏中粘贴上刚才复制的连接地址并进行加载，此时调试脚本已注入调试页面，可在Remote面板中看到百度页面已跟调试服务器建立连接，此时可通过相关面板查看百度页面信息，如图7所示。
图7 待调试的百度主页
强大的是在PC的Element面板内移动鼠标，对应的HTML元素会在手机端Chrome浏览器中高亮显示，跟用Chrome调试本地页面一样，非常棒！
对其它在线页面的调试也一下，先加载再注入调试脚本，关键是调试脚本的注入。试了几次官网上介绍的方法不行，默认粘贴<pre>和<textarea>中的脚本会直接加载该脚本内容，导致注入失败。
本文标签： weinre调试环境搭建
版权声明：本文标题：weinre调试环境搭建 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686731490a30455.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论