`
liuguofeng
  • 浏览: 462499 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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包,下载好之后放在一个文件夹里就行不需任何处理。

     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无线连接,且和电脑在同一网段,(确保本机安装了服务器,可以到网上搜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.iinterest.net/2012/02/08/debugging-mobile-web-applications-with-the-weinre/

分享到:
评论

相关推荐

    weinre-jarwap网站开发工具

    【描述】提到的weinre工具具有以下关键特性: 1. **远程调试**:weinre允许开发者通过网络连接远程控制和调试运行在目标设备上的网页,无论是Android手机、iOS设备还是其他支持WebKit内核的浏览器。 2. **源码查看**...

    Mobile_Debugging_调试小结

    远程调试工具如Weinre(Web Inspector Remote)、Adobe Shadow、Opera Dragonfly等允许开发者通过网络连接到移动设备进行调试。这种方式的优点在于跨设备和跨平台,但需要网络环境支持,可能会消耗较多网络资源。...

    移动端开发调试方法1

    随着移动互联网的兴起,现代浏览器也提供了多种远程调试工具,如Opera Mobile的Opera Dragonfly、iOS Safari的Web检查器、Android 4+系统的Chrome for Android配合ADB实现远程调试等。 #### 2.2 具体方法 1. **...

    weinre-tap:只需一个命令即可远程调试您的静态移动 Web 应用程序

    weinre-tap 只需一个命令,即可远程测试您的静态移动应用这很简单: cd /path/to/static/mobile/appweinre-tap然后打开你的手机浏览器到你机器的IP地址安装npm install -g weinre-tap执照 The MIT License (MIT)...

    cordova-weinre:Apache Weinre的镜像

    weinre是用于Web页面的调试器,例如FireBug(用于FireFox)和Web Inspector(用于基于WebKit的浏览器),但它可以远程工作,尤其是允许您在移动设备(如电话)上调试网页。 weinre是。 有关描述性信息以及下载...

    html5工具介绍

    `http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html` 的Weinre则是一种开源的远程调试工具,支持多种设备和浏览器。 ### iOS与Android开发资源 对于iOS和Android平台,Apple和Google分别提供了官方...

    HTML5开发环境.pdf

    而在移动平台上,weinre(Web Inspector Remote)是一个重要的选择,它通过建立服务器连接设备与调试器,可以通过Node.js的NPM进行安装和使用,提供了类似桌面浏览器的调试界面。 接着,JavaScript的远程断点调试是...

    fekit-extension-mdebug:fekit 的移动调试配置

    Fekit Mobile Debugfekit 插件替换html文件中的资源文件路径为本机ip地址,这样就可直接在手机访问该资源文件安装npm install fekit-extension-mdebug -g使用在要替换的html路径下运行fekit mdebug参数说明:-i 指定...

Global site tag (gtag.js) - Google Analytics