Weinre 远程调试移动端手机web页面

调试场景

1.调试页面在手机上。
2.调试工具在PC的chrome
3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi

一.安装 Weinre

1.Weinre是基于nodejs实现的,所以使用它必须先安装node运行环境,新版的node已经集成了npm, 所以直接在在命令行键入下面的命令即可安装, 如果你是Mac/Linux用户, 还需要在前面加入"sudo":

npm -g install weinre

2.安装后输入命令 "weinre", 查看weinre的默认设置

3.启动 Weinre 服务

输入命令, IP是你局域网的IP(httpPort尽量不要占用8080 以免与你的项目端口冲突)

weinre --boundHost 192.168.0.150 --httpPort 9090

4.浏览器打开Weinre调试工具

用上面配置好的ip与端口访问, http://192.168.0.150:9090/

5.将这段js加入到要调试的页面中

<script src="http://192.168.0.150:9090/target/target-script-min.js#anonymous"></script>

6.在浏览器中打开weinre调试工具

第1行的debug Client urse inferface 地址是Debug Client(Weinre调试工具)的用户访问接口,可以通过这个地址进入Debug Client

http://192.168.0.150:9090/client/#anonymous

点击"target"链接, 将其变绿色激活

七.用手机浏览器访问你自己的页面, 点击Element后就可以审查元素了

八.多用户

Weinre的默认使用中,都是用anonymous作为id的;

但是如果多个用户同时调式各自的页面会有问题,weinre使用多用户机制解决该问题。Weinre默认支持多用户的,这样一个局域网同事只需要一台电脑上安装weinre即可,不需要每个人都安装,多个用户同时使用时,每个用户使用自己的id来区分,每个用户调式信息可以独立,不会相互影响;

将后缀改为其他ID, 如: #youlogin

http://192.168.0.150:9090/client/#youlogin

就可以进行多用户调式了;

与chrome,webkit调试工具类似,各个Tab对应各自不同的功能,可以在主机上随意修改远程网页上的dom、查看资源请求等, 同时在手机对应的调试页面里,查看效果。

注意,手机跟Weinre调试工具要在同一个wifi网段下。

weinre缺点:

没有提供JS调试功能。 

原文地址:https://www.cnblogs.com/alantao/p/7061148.html