博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Weinre调试Mobile Web
阅读量:5891 次
发布时间:2019-06-19

本文共 1228 字,大约阅读时间需要 4 分钟。

移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。

Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等,下面就简单介绍下如何使用。
一、安装及运行Weinre
首先下载Weinre:

以Windows系统为例:

1.下载Weinre的Java版本 weinre-jar-1.6.1.zip 并解压;
2.运行cmd,在weinre文件夹所在路径,运行代码:
java -jar weinre.jar --httpPort 8081 --boundHost -all-
成功后会出现相应信息(不要关闭cmd):

3.使用webkit内核浏览器(chrome、safari)访问 http://localhost:8081/,不出意外的话可以看到weinre的基本信息。

二、添加Debug Target

为了让需要调试的页面被weinre检测到,需要添加Debug Target,有两种方法:
1.Target Script
该方法需要在调试的页面中增加一个js:
http://localhost:8081/target/target-script-min.js#anonymous
添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法

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了。

三、真机调试

回到http://localhost:8081页面,点击“debug client user interface:”链接进入weinre的Debug界面,如果成功添加了Debug Target,这里可以看到它。

接下来我们就可用自己熟悉的方式调试页面了,并且调试结果会实时显示在移动设备上

MAC系统更为简单,不用命令行,直接运行app即可启动weinre,接下来的步骤和windows一样。

参考文章:

转载地址:http://dyfsx.baihongyu.com/

你可能感兴趣的文章
Html学习笔记3
查看>>
杭州见闻
查看>>
What is Xeround?
查看>>
[转载]jQuery上传插件Uploadify使用详解
查看>>
算法学习的轨迹(转)
查看>>
asmx-web-service-basic-authentication
查看>>
Excel转换成图片的操作方法
查看>>
MFC中读取和设置文件状态
查看>>
分页显示
查看>>
iOS中安全结束 子线程 的方法
查看>>
批处理学习笔记8 - 深入学习For命令1
查看>>
Object-c学习之路二(oc内存管理黄金法则1)
查看>>
python开发_python文件操作
查看>>
iPhone 已停用
查看>>
CSS3之边框图片border-image
查看>>
图片轮换cycle插件的运用
查看>>
【Oracle】两个表Join关联更新
查看>>
ActiveX控件的安全初始化和脚本操作 和 数字签名SIGN
查看>>
Eclipse console文本换行
查看>>
微信支付开发(11) Native支付
查看>>