Mobile Web调试工具Weinre使用说明

Posted 2020-09-13

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”就可以生效。