H5移动端调试 weinre

Posted 2020-12-31 liuqd001

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

 

weinre有5大功能

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

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

3. Network：查看网络请求

4. Timeline：

5. Console：查看控制台输出

但是不能做JS调试！

weinre原理

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

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

 

安装教程：

weinre是基于nodeJs程序，安装weinre包（在此之前需要安装node.js）

npm install -g weinre

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

weinre --boundHost 10.32.69.133 --httpPort 8888      //注意：boundHost必须为IP地址，不能为域名。

如果显示下面内容则说明服务启动了。

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

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

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

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

 

多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。