调试移动端网页工具Weinre使用整理

曾经终败给现在 2022-07-12 09:39 290阅读 0赞

**一、Weinre 说明**

Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等。

使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一种远程调试工具:

1.它可以将远程的页面经过代理在PC上调试页面元素、样式，JS。

2.可以监听页面内部的Ajax请求等。

3.可以监听页面加载成功时候的Console控制台输出

官网首页：[http://people.apache.org/~pmuellr/weinre/docs/latest/][http_people.apache.org_pmuellr_weinre_docs_latest]

Weinre的原理

![Center][]

三个端的含义：客户端(client)：本地的WebInspector，远程调试客户端。服务端(agent)：本地的HTTPServer，为目标页面与客户端建立通信。目标页面(target)：被调试的页面，页面已嵌入weinre的远程js。

调试过程：

客户端将指令(请求DOM、执行js)post到代理服务端，目标页面定时(大概5s)从服务端get指令，然后将结果post回服务端，最终客户端定时从服务端get结果。

PS：由于Weinre的客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。

**二、Weinre安装和使用**

1.weinre是基于NodeJs，因此首先要安装NodeJs，然后使用npm命令安装weinre

npm -g install weinre

2.运行，启动weinre服务器，默认端口8080

node.exe node_modules\weinre\weinre --boundHost -all-

node.exe node_modules\weinre\weinre --boundHost  192.168.1.125

在windows下，系统防火墙可能会弹出是否允许其访问网络的提示，点击充许即可。

3.从浏览器访问,http://localhost:8080,或者，http://192.168.1.125:8080，显示如下表示启动服务器监视成功

![Center 1][]

**三、Weinre需要监听调试的Web页面配置处理**

1.在所有页面引入js文件

2.特别说明，当前js文件的域名需要指定为本机的IP地址，因为在手机模拟器中无法访问电脑‘localhost’

![Center 2][]

![Center 3][]

![Center 4][]

[cordova-plugin-whitelist 协议白名单配置整理][cordova-plugin-whitelist]

[VS Code插件安装位置][VS Code]

[Visual Studio Code插件之Atom One Dark Syntax Theme][Visual Studio Code_Atom One Dark Syntax Theme]

相关参考文章：

[http://blog.csdn.net/freshlover/article/details/42640253][http_blog.csdn.net_freshlover_article_details_42640253]

[http://www.cnblogs.com/diva/p/3995674.html][http_www.cnblogs.com_diva_p_3995674.html]

[http_people.apache.org_pmuellr_weinre_docs_latest]: http://people.apache.org/~pmuellr/weinre/docs/latest/
[Center]: /images/20220710/257683a86d0548bab86670b6e500ca79.png
[Center 1]: /images/20220710/d4fea5dcd91f438f9d95350c9efa95cf.png
[Center 2]: /images/20220710/813ae1b763f6443d9efa4f840bb78a46.png
[Center 3]: /images/20220710/2217928866e543a3bce8f57414d0c83e.png
[Center 4]: /images/20220710/0e72932227c74a27a3012353fea5eaca.png
[cordova-plugin-whitelist]: http://blog.csdn.net/u011127019/article/details/56009248
[VS Code]: http://blog.csdn.net/u011127019/article/details/55277166
[Visual Studio Code_Atom One Dark Syntax Theme]: http://blog.csdn.net/u011127019/article/details/53913779
[http_blog.csdn.net_freshlover_article_details_42640253]: http://blog.csdn.net/freshlover/article/details/42640253
[http_www.cnblogs.com_diva_p_3995674.html]: http://www.cnblogs.com/diva/p/3995674.html