H5移动端调试—weinre

一、背景:

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

二、weinre

2.1 什么是weinre

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

2.2 weinre能做什么

clipboard.png
对应上面的菜单,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请求)。

H5移动端调试—weinre_第1张图片
原理就是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)。


进入操作界面就可以尽情操作了。

2.6 多targets

weinre支持多targets的,不同target通过debug id区分的,target js的完整格式:
debug id参数就是用来区分各targetd ,如果不传的话用"anonymous"代替,一般用IP地址作为debug id。

2.7 操作界面

2.7.1 Remote面板

H5移动端调试—weinre_第2张图片

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...

你可能感兴趣的:(css,html,javascript,html5)