Mobile Web调试工具Weinre使用说明

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Mobile Web调试工具Weinre使用说明相关的知识,希望对你有一定的参考价值。

1、安装weinre
weinre官方网站:
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
官方给出的安装方式有两种:npm安装跟下载安装包进行安装。
我们使用npm安装方式为例进行安装。


1)我们需要先安装node.js。node.js官方网站:https://nodejs.org/ 
可以根据你的操作系统选择相应的版本进行下载。这里我以windows10(64)为例进行安装。
安装完成,打开Windows命令提示符,输入‘npm’命令回车。
如果出现如上图信息,表示node.js安装成功。

技术分享

 

2)下面通过npm安装weinre。
打开Windows命令提示符,输入“npm install -g weinre ”命令回车。

如果出现如上图信息,表示weinre安装成功。

技术分享

 

3)安装完成后,需要在本地开启一个监听服务器,比如我目前的IP地址为:10.203.18.117。
打开Windows命令提示符,输入“weinre –httpProt 9999(输入自定义端口号) –boundHost 10.203.18.117(监听服务器IP地址) ”命令回车。
出现下图,表示监听成功。

技术分享

 

2、访问weinre以及进行调试

 

1)在浏览器中,输入设置的监听地址:http://10.203.18.117:9999

技术分享

 

2)  引入远程调用页面。

查看 监听地址中,Target Script说明的Example:
<script src="http://10.203.18.117:9999/target/target-script-min.js#anonymous"></script>
将该引用,放入到项目中。例如:..foxitsoftware\webpdf\viewer\webapp\mobile\index.html
将example的JS代码,引入到index.html页面即可。

3)访问调用。

技术分享

现在,我们使用手机来访问我们的项目地址。然后在查看刚刚点击进去的页面。

技术分享

点击[Elements],即可查看HTML元素和修改对应的css代码了。

技术分享

选中的样式,在手机中,会以粉色效果标注。

 

 

Ps:安装过程中,可能会出现的问题

笔者在打开Windows命令提示符中,输入“weinre”会提示【不是内部或外部命令,也不是可运行的程序或批处理文件。】
解决说明:

(1)需将weinre的安装路径(c:\Users\foxit\AppData|roaming\npm\)放入到node.js路径(笔者路径为C:\Program Files\nodejs)下。


如图所示:

技术分享

(2)配置nodejs的环境变量

重新打开Windows命令提示符中,输入“weinre”就可以生效。
















以上是关于Mobile Web调试工具Weinre使用说明的主要内容,如果未能解决你的问题,请参考以下文章

Mobile Web调试工具Weinre使用说明

weinre调试工具的使用

weinre 实时调试手机上的Web页面

web 调试工具docker的安装使用

Weinre

weinre使用教程