远程调试工具 -- weinre

1、背景情况

　　页面在移动端调试很费力，查看或修改DOM、CSS等都很不方便；

　　 官网：http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/

2、weinre 功能

　　

 

　　1、Element：查看、修改 dom、css

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

　　3、Network：查看网络请求

　　4、console：查看控制台输出

　　不能做得：

　　1、JS调试

3、安装及使用（主要运行场景：本地项目调试）

　　1、安装（weinre时基于nodeJs得）

　　　　npm install  -g weinre

　　2、启动weinre服务

weinre --boundHost 192.168.1.87 --httpPort 8082

　　　　weinre --boundHost  [ IP地址 ]  --httpPort  [ 端口号 ]

　　　　如果出现下面内容就说明启动成功了：

　　　　2018-11-26T02:20:28.598Z weinre: starting server at http://192.168.1.87:8082

　　3、启动服务端口

　　　　http:192.168.1.87:8082

　　　　

　　　　点击：http://192.168.1.87/client/#anonymous 进入以下页面

 　　　　

　　　　targets：none：说明没有连接上

　　4、创建Targets

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

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

　　　　小编自己用得时候把这个注释了也没报错，个人场景应用不一样，只用点联调没涉及更多功能。

　　5、遇到坑

　　　　项目文件应该放在对应得weinre安装路径得www文件夹下面

　　　　例如：D:\node\node_global\node_modules\weinre\web\www\项目文件

　　　　手机和浏览器访问的路径：http://192.168.1.87:8082/www/项目文件