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