Weinre调试移动端页面

Weinre是什么

如果我们做的是Cordova(phonegap)或其他hybird应用,当使用到原生功能时候(类似原生请求数据或页面切换时),没办法在PC chrome浏览器调试页面,一旦页面在手机显示出了问题,我们比较难找到找到原因,有时还只能猜或alert些东西。

 

使用Weinre工具,Weinre的本意是Web Inspector Remote,它是一种远程调试工具,它可以将远程的页面经过代理在PC上调试页面元素、样式,JS。

 

Weinre的原理

三个端的含义:

客户端(client):本地的WebInspector,远程调试客户端。

服务端(agent):本地的HTTPServer,为目标页面与客户端建立通信。

目标页面(target):被调试的页面,页面已嵌入weinre的远程js。

(上面图片及解释转自其他文章)

 

调试过程:

客户端将指令(请求DOM、执行js)post到代理服务端,目标页面定时(大概5s)从服务端get指令,然后将结果post回服务端,最终客户端定时从服务端get结果。

PS:由于Weinre的客户端是基于Web Inspector开发,而Web Inspector只兼容WebKit核心的浏览器,所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。

 

Weinre安装

安装nodejs

weinre基于nodejs,所以先安装nodejs,地址 http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/

PS:请使用 v0-10-15版本的nodejs,不然weinre安装不了

 

安装weinre

命令行执行

npm -g install weinre

这就是安装成功了。

 

Weinre运行

1.命令行键入

weinre -httpPort 8081 -boundHost -all- 

httpPort为调试服务器运行的端口,默认8080;boundHost 调试服务器绑定的IP地址或域名,默认localhost。

 

 

2.用webkit的浏览器(由于weinre的设计更多的是基于webkit的浏览器,因此建议使用chrome/safari)访问weinre服务器:http://localhost:8081

 

 

3.点击打开debug面板:http://localhost:8081/client/#anonymous

 

4.获取服务端的IP地址,例如:192.168.1.101,添加如下js到需要调试的页面。

<script src="http://192.168.1.101:8081/target/target-script-min.js#anonymous"></script>

 

5.在移动设备上访问此页面,即在客户端点击Targets看页面结构,或者执行js。

转载:http://www.cnblogs.com/lovesong/p/4657255.html

时间: 2024-10-03 13:23:36

Weinre调试移动端页面的相关文章

移动端页面单位rem

今天有个朋友在群里上传了一份案例,点进去研究了起来,发现了rem这个单位. 然后我就开始百度rem,搜到几篇好文章,跟大家分享一下, 以下代码,是在朋友所发案例中拷贝的 <!doctype html> <html lang="en"> <head>         <meta charset="UTF-8">         <title>Document</title> </head&g

LOL新英雄与新皮肤移动端页面二三事

  随着移动互联网的迅猛发展,对于游戏的活动宣传渠道不再局限于PC端,微信.手Q.掌上英雄联盟成为英雄联盟重要的推广渠道.在新英雄.新皮肤的移动推广,做了不少的尝试. 以上为2014年6月至2015年6月新英雄移动端推广页面,以及2015年推出的娑娜终极皮肤-DJ娑娜移动端推广页. 在引入页的设计上,设计师根据英雄特性做不同的引入交互,再通过帧动画.CSS3.canvas技术让用户在浏览页面过程中进行一个互动,更形象简易的了解新英雄特性. 弗雷尔卓德之心 布隆 布隆的被动技能通过普通攻击和Q技能

开发者必读 移动端页面优化的10个好方法

移动设备的快速发展颠覆了用户上网的使用习惯.考虑到用户体验,网站设计人员必须让网页适应移动端屏幕的尺寸.随着时间的推移,用户对移动设备的依赖程度越来越高,这就促使开发和设计人员不断对移动端网页进行优化,下面我们就为大家介绍一些优化移动端网页的实用方法,如果你是网页的开发者.设计者,就一定不要错过这篇文章,相信会对你的工作有所帮助. 1.了解你的用户 首先要确定你的受众用户群,发现那些真正对你有价值的忠实用户,但不要妄想去拥有各种类型的用户.一旦确定受众用户群,就要了解他们的上网目的.使用习惯等等

移动端页面缩放仿dialog弹出不居中

问题描述 移动端页面缩放仿dialog弹出不居中 用手机打开web网页,用art .dialog弹出页面居中显示. 那么手机页面进行触摸缩放(放大),用art .dialog弹出页面明显感觉不居中了 解决方案 禁止缩放,要不缩放了大小改变肯定不居中了,artDialog主要是pc端用,移动端事件没添加 <head><meta name=""viewport"" content=""width=device-widthinitia

C# Winform WCF 调试服务端的程序(三种方法)

推荐方法三 方法一: 服务端设置: 1.打开需要调试的解决方案,在WCF服务端项目上右键,将其设置为启动项目 2.在该解决方案下点击 或者直接按F5启动WCF服务端项目. 3.寻找端口号: i.方式一 启动调试后,浏览器中会出现下面的界面 需要留意的是地址栏中的端口号. ii.方式二: 在启动WCF服务项目后,在桌面的右下角会出现,如下面所示的图标: 在这里也可以看到端口号,由于我是重新启动了一次WCF项目,所以显示的端口号与在浏览器中显示的是不一样的. 客户端设置: 4.再次打开该解决方案,将

html排版问题?-PC端页面如何做到页面内容自适应不同分辨率满屏显示,而不出现滚动条和内容不被隐藏?

问题描述 PC端页面如何做到页面内容自适应不同分辨率满屏显示,而不出现滚动条和内容不被隐藏? 比如: 在1280*720分辨率下页面内容能够满屏显示 ,换个1280*800.1280*768.1440*768.1440*900等不同分辨率在又改如何做到内容满屏显示,不要有内容溢出隐藏和上下左右空白出现滚动条的问题,必须要内容占满屏显示.如何做到求大神指教? 解决方案 使用media screen正对不同分辨率写一套css控制不同分辨率下的显示 通过@media screen控制网站在移动端显示

如何将pc端页面的内容分享到朋友圈?

问题描述 如何将pc端页面的内容分享到朋友圈? 如何将pc端页面的内容分享到朋友圈,比如点击分享按钮弹出二维码... 解决方案 只要网站产生一个包含自己链接的二维码就可以了.其它都不要你考虑. 解决方案二: 那么请问怎么使网站产生一个包含自己链接的二维码?我要做出点击分享弹出二维码的效果啊. 解决方案三: 你这个需求 可以使用jiathis实现 现成的 解决方案四: 谢谢,这个我知道,当我不想用第三方工具.

ios端页面都弄好了 能实现基本的聊天 我是php者 我在想我服务端需要做什么呢 怎么做?求大神!

问题描述 ios端页面都弄好了 能实现基本的聊天 我是php者 我在想我服务端需要做什么呢 怎么做?求大神! 解决方案 php调用rest接口,https://github.com/easemob/emchat-server-examples/tree/master/emchat-server-php 这是示例,可以参考下

属性-移动端页面在部分手机上显示页面比例缩小了

问题描述 移动端页面在部分手机上显示页面比例缩小了 移动端页面设置了这个属性,为什么有的页面在部分手机上显示比例缩小了,而有的没问题.就像图片这样在手机上缩小了.已经加了这个name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"