`
子衿青青
  • 浏览: 110431 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Web移动应用调试工具——Weinre

 
阅读更多

如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹。Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug、web inspector),重新设计界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。

Weinre是什么?

Weinre代表We b In spector Re mote,是一种远程调试工具。举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子,通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。

图1: 桌面的debug客户端与手机上的对应页面

使用一种工具之前,了解它的原理和结构是很有帮助的。Weinre作为一种远程调试工具,在结构上分为三层:

  • 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍;
  • Debug客户端(client):本地的Web Inspector调试客户端;
  • Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信。

三层结构如下图所示:

图2:Weinre组成结构

Weinre的debug客户端是基于Web Inspector开发,而Web Inspector只与以WebKit为核心的浏览器兼容,所以Weinre的客户端只能用Chrome或者Safari打开。

运行Weinre

首先需要下载 weinre, weinre目前支持Windows与MacOS, 本文中以Windows版为例。 下载完成之后,启动weinre的Debug服务端。在下载的weinre.jar所在文件夹中运行以下命令:

java -jar weinre.jar --httpPort 8081 --boundHost -all-

这行命令在本机启动了weinre的Debug服务端,端口为8081。打开Chrome或Safari,访问localhost:8081,就可以看到weinre的基本信息。(设置boundHost为-all-,就可以通过IP访问Debug服务端,这点很重要)

上图中的"debug client user interface"是weinre的Debug客户端,点击进入后可以看到目前还没有被测试的目标网页。

如何让网页可以被localhost:8081上的weinre检测到呢?很简单,只要往网页面上添加一个js文件就可以了。如果本机的IP为192.168.0.5,那么就添加如下的js文件。target-script.js可以获得从Debug服务端传来的信息,更改当前页面的样式;也可以运行传来的js,并返回结果。

<script src="http://192.168.0.5:8081/target/target-script.js"></script>

注意,对于dojo这样的异步加载模块,上面的静态嵌入的js就会不兼容,在有dojo等异步加载模块的环境下,请在异步加载全部完成后加载target-script.js

dojo.addOnLoad(function(){
...
dojo.create("script",{
src: "http://192.168.0.5:8081/target/target-script.js"
}, dojo.body());
})

打开添加了这个脚本的网页后,可以看见在Debug 的客户端的里检测到了新的目标页面。

之后我们就能在Elements与Console中调试远程的页面了。


Debug客户端中对应的HTML元素:

同时也可以查看js对象:

分享到:
评论

相关推荐

    远端手机web调试工具weinre

    手机远端调试:使用电脑调试远端手机上的web页面

    weinre-jarwap网站开发工具

    总的来说,weinre-jarwap工具是移动Web开发者不可或缺的利器,尤其在处理jQuery Mobile和其他WAP项目时,能够极大地提高开发效率和调试体验。通过远程调试功能,开发者可以随时随地查看和修改页面源代码,无论他们身...

    IOS浏览器调试工具.rar

    在iOS平台上进行Web应用开发时,调试是一个必不可少的环节。由于iOS设备的封闭性,相对于Android,其浏览器调试工具的使用并不直观。然而,开发者们依然可以借助一系列工具来优化和调试iOS上的Web内容。本资源"IOS...

    Weinre入门手册.pdf

    Weinre,全称Web Inspector Remote,是一款强大的远程调试工具,主要针对移动设备上的Web页面。它基于Web Inspector(WebKit的一部分),允许开发者在个人电脑上直接调试运行在手机或模拟器上的网页。由于Weinre是...

    手机Web页面CSS样式及JS进行PC远程调试【图文】

    weinre(Web Inspector - Remote)是一款基于Node.js的远程调试工具,支持所有浏览器的CSS调试。在开始之前,确保已安装Node.js环境。 3.2、配置 - **nodejs配置**:通过命令行运行`npm install -g weinre`全局安装...

    移动端web开发调试.zip

    8. **Web Inspector工具**:对于iOS设备,可以使用Safari的Web Inspector,对于Android设备,可以使用Chrome浏览器内置的开发者工具,或者使用Weinre(Web Inspector Remote)进行远程调试。 9. **JavaScript调试**...

    移动端开发调试方法1

    - **用途**:weinre是一种允许开发者在桌面端远程调试运行于移动设备浏览器中的Web页面或应用的工具。 - **特性**:开源项目,托管于GitHub。 - **适用场景**:适用于移动Web站点或应用的调试。 #### 1.2 使用步骤 ...

    Mobile_Debugging_调试小结

    Mobile Debugging,即移动设备上的调试,是开发者在构建和优化移动端应用时不可或缺的一个环节。在没有统一且强大的调试环境的情况下,...随着技术的进步,未来移动调试工具将更加成熟,为开发者提供更便捷的开发体验。

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

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

    weinre下载

    ~~网上所描述weinre的错误下载地址:https://github.com/callback/callback-weinre/archives/master及https://github.com/phonegap/weinre/archives/master.本资源为真正可以下载的,可以使用的weinre-jar-1.6.1.zip...

    weinre1.6.1

    网上所描述weinre的错误下载地址:https://github.com/callback/callback-weinre/archives/master及https://github.com/phonegap/weinre/archives/master.本资源为真正可以下载的,可以使用的weinre-jar-1.6.1.zip...

    weinre:weinre入门手册

    初识Weinre  是一款基于Web Inspector(Webkit)的远程调试工具, 它使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面。 与传统的Web Inspector的使用场景不同, Weinre的使用场景如下图, 调试的...

    html5工具介绍

    在探讨HTML5工具的介绍与应用时,我们深入解析了一系列关键知识点,涵盖了移动开发、游戏开发以及相关的开发...无论是构建移动Web应用、混合应用还是游戏,都有相应的框架和工具来简化开发流程,提高应用的质量和性能。

    微信调试各种WebView样式调试手机浏览器的页面真机调试

    关于spy-debugger 1、一站式页面调试工具,远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)HTTP/HTTPS。 2、spy-debugger内部集成了weinre。 3、支持HTTPS页面的调试。

    weinre 远程调试

    weinre 远程调试,可以让你直接通过PC端直接调试手机端的JS,HTML,CSS等,WebApp开发利器,详细教程http://blog.csdn.net/jerryvon/article/details/8584289

    Phonegap API中文版

    9. **调试工具**:PhoneGap提供了一套调试工具,如Chrome开发者工具、Weinre(Web Inspector Remote)等,帮助开发者在真实设备或模拟器上进行调试。 10. **应用发布**:完成开发后,开发者需要按照各个平台的规范...

    微信、手Q、Qzone之x5内核inspect调试解决方案

    对于手Q和Qzone,可能需要借助第三方工具,如Weinre(Web Inspector Remote),这是一款基于Apache Cordova的远程调试工具,可以模拟Chrome的开发者工具。 4. **启用inspect**:在应用中打开需要调试的网页,然后在...

    一站式页面调试工具Spy-Debugger.zip

    1、一站式页面调试工具,远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)HTTP/HTTPS。 2、spy-debugger内部集成了weinre。 3、支持HTTPS页面的调试。 安装 ...

    关于HTML5移动开发调研报告

    为了解决这一问题,weinre作为一种远程调试工具发挥了重要作用,它允许开发者在桌面浏览器上对手机应用进行实时调试,极大地提高了开发效率。 未来,随着HTML5在移动开发领域的深入,调试工具的重要性将进一步提升...

    cordova-weinre:Apache Weinre的镜像

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

Global site tag (gtag.js) - Google Analytics