使用weinre调试手机页面

阅读目录

• 介绍Weinre
• 安装Weinre
• 通过Weinre调试页面
• 启动target

介绍Weinre

　Weinre（Web Inspector Remote），是一种远程调试工具。功能与Firebug及chrome调试器类似，可以帮助我们即时更改页面元素、样式，调试JS等。

weinre由三部分组成

1. debug server

核心组件，运行在服务端，负责与另外两部分通信。

2.debug client

webkit核浏览器,与debug server通信。展现调试界面，允许你修改dom，查看网络信息等。

3. debug target. 

待调试的页面。你需要在页面中嵌入一小段js。它将通过XHR方式与debug server通信，进行调试信息的收发。

安装Weinre

执行：sudo npm install -g weinre(mac的）

安装完之后，还需要监听服务器，我的IP是 10.58.184.219

执行：

weinre -boundHost 10.58.184.219  -httpPort 8081

通过Weinre调试页面

首先你访问：http://10.58.184.219:8081/ ,会看到下面的页面，列出了weinre的文档及用于调试的url。

然后点进去：http://10.58.184.219:8081/client/#anonymous，会发现并没有Targets，同时列出了client及server端信息。

启动target

在调试页面加一段js：

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

当然，如果要调试的页面很多，不方便在每一页都直接插入上文的代码。可以浏览器“书签”的方式保存一下面一段js，以动态方式插入script　　

javascript:(function(e){e.setAttribute("src","http://10.136.30.144:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

因为我要调试的demo运行在http://10.58.184.219:9080/BrowsersyncExample/

页面中引入js后，用手机浏览器打开待调试页面 http://10.58.184.219:9080/BrowsersyncExample/

当我们用手机访问这个调试页面 http://10.58.184.219:9080/BrowsersyncExample/时，浏览器上会出现

切换到Elements时就是这样

这个时候就跟谷歌审查元素的模式是一模一样了。

参考文章：http://www.cnblogs.com/tugenhua0707/p/4681482.html#_labe1

http://blog.csdn.net/qmhball/article/details/45848215

http://www.3fwork.com/b403/001049MYM000079/