现在、将来,用移动设备上网越来越成为主流。但对于开发者们来说,移动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无线连接,且和电脑在同一网段,(确保本机安装了服务器,可以到网上搜xampp或wamp,)把要调试的页面放在服务器中相应的文件夹中,我安装的是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/
相关推荐
手机远端调试:使用电脑调试远端手机上的web页面
总的来说,weinre-jarwap工具是移动Web开发者不可或缺的利器,尤其在处理jQuery Mobile和其他WAP项目时,能够极大地提高开发效率和调试体验。通过远程调试功能,开发者可以随时随地查看和修改页面源代码,无论他们身...
然而,开发者们依然可以借助一系列工具来优化和调试iOS上的Web内容。本资源"IOS浏览器调试工具.rar"提供了一些帮助你解决这一问题的解决方案。 首先,我们要了解Safari的内置开发者工具。由于Safari是iOS系统默认的...
Weinre,全称Web Inspector Remote,是一款强大的远程调试工具,主要针对移动设备上的Web页面。它基于Web Inspector(WebKit的一部分),允许开发者在个人电脑上直接调试运行在手机或模拟器上的网页。由于Weinre是...
远程调试工具如Weinre(Web Inspector Remote)、Adobe Shadow、Opera Dragonfly等允许开发者通过网络连接到移动设备进行调试。这种方式的优点在于跨设备和跨平台,但需要网络环境支持,可能会消耗较多网络资源。...
weinre(Web Inspector - Remote)是一款基于Node.js的远程调试工具,支持所有浏览器的CSS调试。在开始之前,确保已安装Node.js环境。 3.2、配置 - **nodejs配置**:通过命令行运行`npm install -g weinre`全局安装...
~~网上所描述weinre的错误下载地址:https://github.com/callback/callback-weinre/archives/master及https://github.com/phonegap/weinre/archives/master.本资源为真正可以下载的,可以使用的weinre-jar-1.6.1.zip...
网上所描述weinre的错误下载地址:https://github.com/callback/callback-weinre/archives/master及https://github.com/phonegap/weinre/archives/master.本资源为真正可以下载的,可以使用的weinre-jar-1.6.1.zip...
8. **Web Inspector工具**:对于iOS设备,可以使用Safari的Web Inspector,对于Android设备,可以使用Chrome浏览器内置的开发者工具,或者使用Weinre(Web Inspector Remote)进行远程调试。 9. **JavaScript调试**...
初识Weinre 是一款基于Web Inspector(Webkit)的远程调试工具, 它使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面。 与传统的Web Inspector的使用场景不同, Weinre的使用场景如下图, 调试的...
weinre 远程调试,可以让你直接通过PC端直接调试手机端的JS,HTML,CSS等,WebApp开发利器,详细教程http://blog.csdn.net/jerryvon/article/details/8584289
关于spy-debugger 1、一站式页面调试工具,远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)HTTP/HTTPS。 2、spy-debugger内部集成了weinre。 3、支持HTTPS页面的调试。
随着移动互联网的兴起,现代浏览器也提供了多种远程调试工具,如Opera Mobile的Opera Dragonfly、iOS Safari的Web检查器、Android 4+系统的Chrome for Android配合ADB实现远程调试等。 #### 2.2 具体方法 1. **...
1、一站式页面调试工具,远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)HTTP/HTTPS。 2、spy-debugger内部集成了weinre。 3、支持HTTPS页面的调试。 安装 ...
weinre-tap 只需一个命令,即可远程测试您的静态移动应用这很简单: cd /path/to/static/mobile/appweinre-tap然后打开你的手机浏览器到你机器的IP地址安装npm install -g weinre-tap执照 The MIT License (MIT)...
Usage for webapp debug. Just as follow: step 1: <script src="http://{IP}:8081/target/target-script.js"></script> step 2: Run the bat "debug.bat" step 3: open safari and call ...
对于手Q和Qzone,可能需要借助第三方工具,如Weinre(Web Inspector Remote),这是一款基于Apache Cordova的远程调试工具,可以模拟Chrome的开发者工具。 4. **启用inspect**:在应用中打开需要调试的网页,然后在...
weinre是用于Web页面的调试器,例如FireBug(用于FireFox)和Web Inspector(用于基于WebKit的浏览器),但它可以远程工作,尤其是允许您在移动设备(如电话)上调试网页。 weinre是。 有关描述性信息以及下载...
VorlonJS 是一个开源可扩展的浏览器诊断工具,可远程调试和测试你的 JavaScript 应用,基于 Node.js 和 Socket.IO 开发。 标签:Vorlon
使用Weinre进行远程调试该项目的目的是与Weinre建立远程调试会话。安装Weinre远程调试器的此实现作为之上的任务运行。 安装 然后安装此gulp任务的所有依赖项npm installnpm install -g gulp开始gulp 默认情况下,...