Mobile Web调试工具Weinre (reproduce)
Mobile Web调试工具Weinre
现在、将来,用移动设备上网越来越成为主流。但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。
Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等,下面就简单介绍下如何使用。下面以以Windows系统为例:
一、首先确保你的电脑已经搭建好了java环境。即:安装了jdk。这里就不多说了,在网上搜个jdk,一步步安装及ok。
二、安装及运行Weinre
1、下载:http://ishare.iask.sina.com.cn/f/23607399.html ,这里直接下载jar包,下载好之后放在一个文件夹里就行不需任何处理。
github下载地址: https://github.com/callback/callback-weinre/archives/master
2、运行cmd,在weinre所在文件夹的地址栏输入代码:java -jar weinre.jar --httpPort 8081 --boundHost -all- (如下图):
3、回车后会出现相应信息(注意:在调试过程中不要关闭cmd):
4、打开本地浏览器,(使用webkit内核浏览器(chrome、safari))访问 http://localhost:8081/,不出意外的话可以看到weinre的基本信息。
5、上图中的"debug client user interface"是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页。
三、添加Debug Target
为了让需要调试的页面被weinre检测到,需要添加Debug Target,有两种方法:
1、Target Script
该方法需要在调试的页面中增加一个js:
<script src="http://192.168.0.106:8081/target/target-script-min.js#anonymous" type="text/javascript">
</script>
添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法
2、Target Bookmarklet
该方法是将一段js保存到移动设备的书签中,可以在 http://localhost:8081/ 找到这段js:
javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
我将这段js保存到名为Debug书签中,然后使用移动设备访问我想要调试的页面,比如说 http://iinterest.net,最后点击Debug书签就OK了。
四、真机调试。
1、 移动设备须有有wifi无线连接,且和电脑在同一网段,(确保本机安装了服务器,可以到网上搜xampp或wamp,)把要调试的页面放在服务器中相应的文件夹中,我安装的是xampp,所以放在htdocs目录下。在手机的页面中打开本页面的地址,如:http://192.168.0.102/index.html 。回到http://localhost:8081页面,点击“debug client user interface:”链接进入weinre的Debug界面,如果成功添加了Debug Target,这里可以看到它。
2、接下来我们就可用自己熟悉的方式调试页面了,并且调试结果会实时显示在移动设备上
MAC系统更为简单,不用命令行,直接运行app即可启动weinre,接下来的步骤和windows一样。
参考:http://www.iinterest.net/2012/02/08/debugging-mobile-web-applications-with-the-weinre/
转载自:
【作者】:@挨踢前端
【出处】:http://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html
【声明】:所有博文标题后加(share)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢!
Mobile Web调试工具Weinre (reproduce)的更多相关文章
- Web移动应用调试工具——Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...
- 转 Web移动应用调试工具——Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...
- Web移动应用调试工具——Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebu ...
- 移动前端调试工具-Weinre真机调试
之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移 ...
- front end about mobile web techs
WEB OF DEVICES http://www.w3.org/standards/webofdevices/ MOBILE WEB http://www.w3.org/standards/webd ...
- Mobile Web中URL设计问题
自己虽然也注册了CSDN账号,但是没有在上面发表过博客等内容.不过经常在Google里面搜索相关内容时,会显示csdn的结果.这也说明国内很多IT人员都会在CSDN发表博客,记录解决问题过程或者想法. ...
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...
- Web调试工具——Fiddler介绍
Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...
- 打造离线使用的Mobile Web App
最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobi ...
随机推荐
- F2工作流引擎模型
工作流引擎(Workflow Engine ) [编辑] 工作流引擎概述 工作流引擎是指workflow(工作流)作为应用系统的一部分,并为之提供对各应用系统有决定作用的根据角色.分工和条件的不同决定 ...
- MYSQL 5.6中禁用INNODB引擎
并不是所有人都需要INNODB引擎,虽然它弥补了MYSQL缺乏事务支持的毛病,但是它的磁盘性能一直是让人比较担忧的.另外比较老的PHP系统,大多是采用MYISAM引擎在MYSQL建表,似乎INNODB ...
- JavaWeb chapter6 对象作用域
1. 对象属性所在作用域:谁能看到并使用这个属性,以及它能存活多久. 2. 应用上下文ServletContext对象作用域: 对于整个Web应用,只有一个ServletContext对象,而且在 ...
- Winform TreeList递归绑定树节点
/// <summary> /// 绑定树目录 /// </summary> /// <param name="parentId">父ID< ...
- Invoke-WebRequest Invoke-RestMethod 乱码研究
powershell Invoke-WebRequest Invoke-RestMethod 乱码 encoding sharset CharacterSet Invoke-WebRequest和In ...
- android 缓存Bitmap 使用内存缓存
private LruCache<String, Bitmap> mMemoryCache; /** * 判断内存大小 设置位图的缓存空间 */ private void judgeMem ...
- eclipse快捷键用不了
ctrl+shift+R是eclipse最常用的快捷键之一,用于打开资源,输入文件名或文件名中的前几个字母,就可以打开工作区中任意文件 今天在打开eclipse,使用该快捷键时,提示“该快捷方式所指向 ...
- 从c开始,小小感悟
c语言是众多编程小白进入编程大门的钥匙,不过许多人在学习一段时间以后就渐渐产生了困惑,枯燥的黑色界面渐渐让他们失去了"渴望",---我还不能制作出一款像样的软件,我还是只是在算数学 ...
- 在Hibernate中配置Hilo进行数据绑定测试时出错:org.hibernate.MappingException: Could not instantiate id generator
在进行学习具体类单表继承时使用hilo类型时总是在调度过程中提示如下信息,无法通过.留下记录备查. 在网上找相关信息, 未解决,详细如下: org.hibernate.MappingException ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...