zoukankan      html  css  js  c++  java
  • 使用weinre调试Web应用及PhoneGap应用

    Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试。但是,当我们期望为移动Web站点或应用进行调试时,这些工具就很难派上用场。

    weinre就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的Web页面或应用的调试工具。weinre是WEb INspector REmote的简写。本文将介绍weinre的基本使用方法,包括下载、安装、如何使用,以及使用weinre来调试phoneGap应用。

    关于Adobe Inspect

    weinre非常方便,目前来说是针对移动设备进行远程调试的最佳工具,但在进行真正的跨平台移动web应用开发时,通常开发者要面对多个不同型号的移动设备,此时要使用weinre同时同步在所有设备上进行调试就是一个非常费时费力的事情,
    在Adobe创意云平台上,提供了免费的针对多移动设备间同步测试的工具Adobe Inspect,你可以注册并免费下载。

    Adobe Shadow

    在Adobe推出了最新的创意云服务,在这个服务平台上用户可以下载最新的Adobe工具,最棒的是可以免费获取主动Adobe刚刚推出的实验版软 件,包括HTML5动画制作工具Adobe Edge Animate,HTML5编程工具Adobe Edge Code,以及移动平台测试软件Edge Inspect等。在这里可以免费注册:http://t.cn/zYOZYTb ,在此可以登录获取:http://t.cn/zYOZjxH


    下载

    下载地址:https://github.com/callback/callback-weinre/archives/master,如下图:

    下载weinre

    weinre提供了两种下载,一种是.jar文件,另一种是mac可安装文件。本文中将主要以.jar文件为例。如果你使用了mac电脑,那么可以选择mac安装文件方式,运行weinre应用后,如下图:

    在mac上运行的weinre应用


    weinre的基本概念

    在使用weinre之前,需要先了解一下weinre的基本概念。

    使用weinre的目的是调试运行在移动设备浏览器内的web站点或应用,我们称这个移动设备即为“调试目标(Debug Target)”。由于在移动设备上直接进行调试操作不便,weinre帮助我们使用桌面传统的webkit环境(比如Web Inspector或者Google Chrome的开发者工具)来进行调试,我们称这个桌面调试环境为“调试客户端(Debug Client)”。weinre为了能够同步桌面的调试客户端和移动设备上的调试目标,需要你搭建一个“调试服务器(Debug Server)”。

    因此,在使用weinre进行远程设备调试时,包含了之上的三种元素:

    • 调试服务器:调试服务器起到代理的作用,用来同步调试目标和调试客户端之间的命令
    • 调试客户端:通常为桌面调试环境,即开发者实际操作调试的地方
    • 调试目标:运行被调试web内容的移动设备

    weinre的调试目标和客户端都运行在浏览器中,而调试服务器则以HTTP服务器方式作为二者的中介运行。在Patrick Mueller关于weinre的手册中,解释了这种关系。更详细的解释可见:http://muellerware.org/papers/weinre/manual.html

    weinre的组成


    启动调试服务器

    解压下载后的weinre-jar-1.6.1.zip文件后,你可以得到weinre.jar文件。第一步是启动weinre调试服务器。命令如 下。其中192.168.43.149是运行weinre机器的ip地址,通常就是调试人员机器的地址。默认情况下weinre使用端口8080。如果你 希望修改端口号,可以使用–httpPort参数指定定制端口。

    java -jar weinre.jar --boundHost 192.168.43.149

    成功启动weinre后的输出结果如下:

    此时,打开webkit引擎浏览器,比如Chrome,输入url:http://192.168.43.149:8080,可以看到weinre已经启动。我们现在打开的这个浏览器窗口就是weinre的调试服务器主页。如下图:

    weinre调试服务器主页


    调试移动Web应用

    现在在桌面启动调试客户端。如weinre调试服务器主页上所描述,即打开Chrome浏览器,输入debug client user interface地址(调试客户端UI地址)。本例中即:http://192.168.43.149:8080/client /#anonymous,其中#anonymous是默认的调试id(debug id)。如果这个weinre调试服务器只是由你一个人使用,那么你可以使用默认的debug id:anonymous。

    启动的weinre调试客户端ui如下图:

    weinre调试客户端UI


    目前,我们还没有连接任何调试目标(通常即移动设备)到调试服务器,因此上图中,targets下显示为none。

    下面,我们在移动设备上运行我们要测试的web页面,并开始利用调试客户端进行调试。要进行测试的web站点或者应用可以部署在任何一台服务器上,不需要 一定与weinre服务器运行在一起。为了能够在web站点上激活weinre调试,需要在页面中加入如下script脚本。在本例 中,xxx.xxx.xxx.xxx:8080为weinre调试服务器的地址和端口号。这样,页面运行target-script-min.js时,能 够连接weinre服务器,进而实现远程调试。

        
    

    现在,我们在移动设备上打开浏览器,运行我们将要调试的应用,如下图:

    运行在移动设备浏览器中的web应用

    此时,如果查看桌面浏览器内的weinre调试客户端,应该可以看到weinre已经检测到targets,如下图:

    weinre检测到target

    现在,使用调试客户端的element,resource,network,timeline和console功能,就可以在桌面上远程针对移动设备上浏 览器内运行的web应用进行调试了,使用的方法和Chrome的开发者工具相同。比如选择DOM元素,调整样式值或者dom值,检测网络数据,甚至在 console中远程运行js脚本。当在移动设备上操作被调试的web内容时,weinre会自动更新调试客户端中的内容,比如element面板中的 dom树。
    目前为止,使用weinre还无法针对script进行调试,比如设置断点。
    下图显示了使用element面板来选择一个DOM元素时,在移动设备上同时高亮该元素的情况。


    调试PhoneGap应用

    PhoneGap应用实际上就是运行在移动设备webview中(Android:webview,IOS:uiwebview)的web应用,因此只需要在要调试的web应用页面中加入weinre脚本即可。

    如果你不愿意自己搭建weinre服务器,那么你可以考虑使用phoneGap提供的在线weinre调试服务器,地址 为:debug.phonegap.com,如下。可以看到,你只需要提供debug id,然后在你将要调试的web应用或站点页面中加入对应的weinre script,其中要使用phonegap debug服务器的端口和地址,之后运行其客户端即可。

    PhoneGap调试服务器


    资料

    Update:
    上述Github地址已经失效,新的地址在 http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/ 和 https://github.com/pmuellr/weinre

  • 相关阅读:
    HIVE Group by、join、distinct等实现原理
    【1.3】shell基础——调试shell(sh -x)
    sql server无法显示请求的对话框,检索数据失败
    sql server索引操作
    sql server中的alter
    tempdb无法收缩。使用 DBCC FREESYSTEMCACHE 解决
    在从该备份集进行读取时,RESTORE 检测到在数据库 "CISDB" 中的页(0:0)上存在错误。系统断定检查已失败
    【1.2】shell基础——stty erase解决按backspace出现^H的情况
    【1.1】shell基本实践——密码输入三次错误则结束
    (5.3.7)数据库迁移——sql server备份文件的加密解密
  • 原文地址:https://www.cnblogs.com/zhwl/p/3202147.html
Copyright © 2011-2022 走看看