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

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

hot3.png

现在、将来,用移动设备上网越来越成为主流。但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。 

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

  一、首先确保你的电脑已经搭建好了java环境。即:安装了jdk。这里就不多说了,在网上搜个jdk,一步步安装及ok。

  二、安装及运行Weinre

    1、下载:  ,这里直接下载jar包,下载好之后放在一个文件夹里就行不需任何处理。

     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

    添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法

    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无线连接,且和电脑在同一网段,(确保本机安装了服务器,可以到网上搜xamppwamp,)把要调试的页面放在服务器中相应的文件夹中,我安装的是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.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html】

转载于:https://my.oschina.net/u/820238/blog/300292

你可能感兴趣的文章
怎么用Navicat Premium图标编辑器创建表
查看>>
Spring配置文件(2)配置方式
查看>>
MariaDB/Mysql 批量插入 批量更新
查看>>
ItelliJ IDEA开发工具使用—创建一个web项目
查看>>
solr-4.10.4部署到tomcat6
查看>>
切片键(Shard Keys)
查看>>
淘宝API-类目
查看>>
virtualbox 笔记
查看>>
Git 常用命令
查看>>
驰骋工作流引擎三种项目集成开发模式
查看>>
SUSE11修改主机名方法
查看>>
jdk6.0 + Tomcat6.0的简单jsp,Servlet,javabean的调试
查看>>
Android:apk签名
查看>>
2(2).选择排序_冒泡(双向循环链表)
查看>>
MySQL 索引 BST树、B树、B+树、B*树
查看>>
微信支付
查看>>
CodeBlocks中的OpenGL
查看>>
短址(short URL)
查看>>
第十三章 RememberMe——《跟我学Shiro》
查看>>
mysql 时间函数 时间戳转为日期
查看>>