H5移动端调试—weinre

1、背景：

H5页面在PC上调试起来很方便，可是在手机上却很麻烦，此时移动端就像一个黑匣子，查看或修改DOM、CSS，localStore等变的很困难。
这个时候远程调试就孕育而生了。

2、weinre

2.1 什么是weinre

Weinre是单词缩写，全称是网页远程审查（Web Inspector Remote），发音同winery [ˈwaɪn(ə)ri]。能够在PC上调
试运行在移动端上的页面。

2.2 weinre能作什么

对应上面的菜单，weinre有5大功能

1. Element： 查看/修改dom，查看/修改 dom CSS

2. Resources：查看/修改 localStorage, sessionStorage

3. Network：查看网络请求

4. Timeline：

5. Console：查看控制台输出

2.3 weinre不能作什么

1. JS调试

2.4 weinre原理

目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍；
Debug客户端（client）：本地的Web Inspector调试客户端；
Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端创建通讯（target和client不断的向agent发生get/post请求）。

原理就是Client的任何操做命令都会发给target执行，一样target的任何操做也会发给client执行。

2.5 搭建环境&使用

2.5.1：weinre是基于nodeJs程序，安装weinre包

npm install -g weinre

2.5.2：启动weinre服务 （代理【agent】服务）

weinre --boundHost 10.32.69.133 --httpPort 8888

参数说明参考：http://people.apache.org/~pmu...
若是显示下面内容则说明服务启动了。

2016-01-19T10:37:26.772Z weinre: starting server at http://10.32.69.133:8888

2.5.3：启动调试客户端

在浏览器中打开”http://10.32.69.133:8888“便可启动调试客户端

2.5.4：建立Target

建立个页面，并加入如下JS（表示从代理服务中引入target/target-script-min.js）。

<!- IP是weinre服务的IP -->
<script src="http://10.32.69.133:8888/target/target-script-min.js"></script>

进入操做界面就能够尽情操做了。

2.6 多targets

weinre支持多targets的，不一样target经过debug id区分的，target js的完整格式：<script src="{代理服务地址}:{代理服务端口}/target/target-script-min.js#{debug id}"></script>
debug id参数就是用来区分各targetd ,若是不传的话用"anonymous"代替，通常用IP地址做为debug id。

2.7 操做界面

2.7.1 Remote面板

2.7.2 Elements面板

A：查看，修改，删除Dom元素，目前还不能增长DOM元素。
B：查看，修改，删除Dom元素属性，目前不支持增长DOM元素属性。
C：查看，修改，删除，增长 CSS属性。

2.7.3 Resources面板

查看，修改，删除localStorage/sessionStorage。
测试发现：不能删除，修改，增长？？？

2.7.4 Network面板

查看XHR请求信息，虽然该面板中有各类网络请求的类型，可是目前只能查看XHR请求记录。

2.7.5 Timeline面板

查看target中触发的事件时间信息（触发事件）。目前只支持两种事件：setTimeout/setInterval和用户指定的事件（经过在事件处理函数中调用console.markTimeline('tag')函数指定）

2.7.6 Console面板

用来执行JS语句和表达式，以及展现console的方法输出。

参考：

http://www.huolg.net/html5/we...
http://people.apache.org/~pmu...
weinre操做界面：http://people.apache.org/~pmu...
http://muellerware.org/papers...