weinre调试环境搭建
2013-04-13 00:00
162 查看
网页问题分析过程中经常会遇到需要分析手机页面源码的情况,之前都是通过工具将手机上的网页另存为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方式安装,没试)。
./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,所以对于其他本地调试页面,也可以放到该文件夹内进行调试,但不要忘了加入调试脚本.
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>中的脚本会直接加载该脚本内容,导致注入失败。
一、工具准备
以下工具与本人使用的环境做介绍。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>中的脚本会直接加载该脚本内容,导致注入失败。
相关文章推荐
- 使用weinre和fiddler搭建Mobile Web调试环境
- Hystrix源码解析 —— 调试环境搭建
- 搭建 javascript 调试环境
- VMWare+WinDbg搭建(驱动)调试环境
- 《Linux0.11内核完全注释》读后小结 --- 调试环境的搭建
- windows下用eclipse+goclipse插件+gdb搭建go语言开发调试环境
- Eclipse for php + Xdebug搭建PHP的调试环境
- php 环境搭建+ecshop 本机调试
- Windows驱动开发:3 WRK调试环境搭建
- windows下搭建Spark1.6源码调试阅读环境
- 调试内核Ubuntu 搭建嵌入式开发环境-续
- Davinci调试环境的搭建
- Spark程序开发-环境搭建-程序编写-Debug调试-项目提交
- 调试环境搭建&PHP工程开始!
- Linux 上搭建Visual Studio Code 调试C++的环境
- Mycat源码篇 : 起步,Mycat源码阅读调试环境搭建
- Lua cocos2dx (quick cocos2d x ) Lua调试开发环境搭建资源总结
- eclipse + Felix 开发环境搭建 bundle 开发与调试
- [cocos2dx-html5]手把手,快速搭建 Cocos2d-HTML5 开发调试环境