码迷,mamicode.com
首页 > Web开发 > 详细

Mobile Web调试工具Weinre使用说明

时间:2017-04-24 15:29:44      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:安装路径   操作   批处理文件   查看   elements   样式   https   script   提示符   

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使用说明

标签:安装路径   操作   批处理文件   查看   elements   样式   https   script   提示符   

原文地址:http://www.cnblogs.com/shuimengzhe2s/p/6756732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!