注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

isblog主页

或许不一定要做得最多,但一定要做得最好! 能力就是一种财富,积累越多,就越体现你

 
 
 

日志

 
 

远程实时调试手机上的Web页面  

2015-03-18 22:38:51|  分类: 手机web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Weinre是什么?

Weinre代表Web Inspector Remote,是一种远程调试工具。举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子,通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。该项目是 Apache Cordova 的一部分。


运行原理

Weinre作为一种远程调试工具,在结构上分为三层:

  • 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;

  • Debug客户端(client):本地的Web Inspector调试客户端;

  • Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。

远程实时调试手机上的Web页面 - isblog - isblog主页

 


注:安装Weinre 需要 Node.js 环境 。

windows下安装Weinre 测试

1、安装node.js

下载node.js地址:https://nodejs.org/download/

下载.msi安装好后,打开Node.js command prompt, 通过NPM来安装 weinre

2、安装Weinre

开始菜单找到Node.js command prompt打开控制面板

输入命令安装 :npm install -g weinre


如果你被管制了(无法通过npm install -g weinre来下载安装),可以到这里手动下载安装包 http://people.apache.org/~pmuellr/weinre/builds/2.0.0-pre-H41DGW8S-incubating/

如下载安装包:apache-cordova-weinre-2.0.0-pre-H41DGW8S-incubating-bin.tar.gz  放到F:目录

还是先在开始菜单找到Node.js command prompt打开控制面板

进入F目录: F:

执行命令:npm -g install apache-cordova-weinre-2.0.0-pre-H41DGW8S-incubating-bin.tar.gz


3、启动Weinre

输入命令启动:

weinre --httpPort 8081 --boundHost -all-

注:端口可以自定义,如8080。

4、通过PC浏览器(WebKit内核)打开 WeinreDe bug 客户端
浏览器输入:http://localhost[Your IP]:8081

5、在你需要调试的页面加上通信用的脚本
<script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>
调试文件可以放到apache运行目录下。如wamp server安装目录E:\wamp\www
或者weinre的web目录,点击浏览器打开页面的debug client user interface:对应的地址,可以看到weinre的web目录地址
远程实时调试手机上的Web页面 - isblog - isblog主页
如测试demo:C:\Users\yong\AppData\Roaming\npm\node_modules\weinre\web\demo
6、在手机上访问你的测试文件:
如:http://192.168.0.103:8081/demo/weinre-demo.html
http://192.168.0.103:80/test/demo.html (这个是放在wamp的www目录下的)

7、浏览器调试手机上的页面
1、浏览器打开:http://192.168.0.103:8081
看到下面这一行,
http://192.168.0.103:8081/client/#anonymous
 点击进入列表页面
页面点击你要调试的地址开始体验手机页面调试。
远程实时调试手机上的Web页面 - isblog - isblog主页
 



 

  评论这张
 
阅读(478)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017