weinre使用

2016-1-21 更新说明:

微信web开发者工具已经集成了weinre,只需设置手机代理便可调试任意页面,更简单更方便,推荐使用!

Web应用开发者需要针对手机进行界面的调试,但是手机上并没有称心如意的调试工具(如Firebug),调试界面的工作往往事半功倍。本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具。本文以Windows系统为例:

为什么使用weinre

我们在调试web页面时,在PC端我们有Chrome控制台、FireBug这两款优秀的工具,让我们可以查看Elements、Network、Console等项,让本来复杂的前端变得简单而有趣。

例如,js出问题了,使用Console查看便知;页面css有问题,通过审查元素即可定位元素。

但是,当我们在移动端测试h5页面,当出现问题,该怎么查看?明明在电脑上访问是正常的,到手机里就不正常了。哪里出问题了?怎么追踪?都是个难题。

weinre就为我们提供了诸如Elements、Network、Console等功能调试,你在手机上点击的任何一个链接,发出的任何一次请
求,weinre都可以捕捉,并以我们熟悉的Console控制台方式显示。甚至,我们在控制台里点击页面的某个标签,在手机都会以选中的形式告知我们,
当前这个标签对应的页面的哪一块。

weinre是什么

引自网友的一段话:

Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等。

举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素、样式表,或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息。

如何安装

首先确保你的电脑已经搭建好了java环境。即:安装了jdk。这里不多做说明。

weinre没有安装包,不会像普通程序那样有界面,他依赖命令行和浏览器。

weinre本身是个jar包。我们需要下载这个文件:weinre-jar-1.6.1.zip

由于不大好下载,这里列出下载地址:
1、weinre unofficial binary packages for your convenience:
http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

2、weinre1.6.1 - 下载频道 - CSDN.NET
http://download.csdn.net/detail/skyhh/4629366

下载下来,解压到某个目录,例如D:\weinre\

解压后是个weinre.jar文件。

启动weinre

命令行下输入:

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

提示:

2016-01-21 16:41:27.185:INFO::jetty-7.x.y-SNAPSHOT
2016-01-21 16:41:27.292:INFO::Started SelectChannelConnector@0.0.0.0:8081
2016-01-21 16:41:27.293:INFO:weinre:HTTP server started at http://localhost:8081

说明weinre已经在正常运行。httpPort为端口,大家可自行更改。运行weinre.jar后,命令行要一直开着,可以写一个bat文件,需要的时候,执行bat就可以。

在浏览器(使用webkit内核浏览器,如chrome)输入:http://localhost:8081,即可看到weinre的基本信息

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

移动端调试

为了让需要调试的页面被weinre检测到,需要添加Debug Target,有两种方法:

1、Target Script

该方法需要在调试的页面的header标签中增加一个js:

<script src="http://192.168.36.101:8081/target/target-script-min.js#anonymous" type="text/javascript">
</script>

添加后在移动设备中访问该页面即可。以上192.168.36.101是你电脑的局域网IP地址。注意替换。

如果被测试的页面我们无法改变其代码,那么还可以使用下面的第二种方法,添加书签。

2、Target Bookmarklet
该方法是将一段js保存到移动设备的书签中,可以在 刚才打开的http://localhost:8081/ 找到这段js:

javascript:(function(e){e.setAttribute("src","http://192.168.36.101:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

将这段js保存到名为Debug书签中,然后使用移动设备访问我想要调试的页面,比如说 http://baidu.com,最后点击`Debug`书签就OK了。

但是目前手机上好多浏览器已经不支持添加这样格式的书签了,会提示无效。

出现问题

目前发现打开debug client user interface页面空白,控制台显示js错误,暂时无解决方案。暂时搁置。推荐使用微信web开发者工具方案代替。

时间: 2024-12-22 13:12:21

weinre使用的相关文章

Weinre调试移动端页面

Weinre是什么 如果我们做的是Cordova(phonegap)或其他hybird应用,当使用到原生功能时候(类似原生请求数据或页面切换时),没办法在PC chrome浏览器调试页面,一旦页面在手机显示出了问题,我们比较难找到找到原因,有时还只能猜或alert些东西.   使用Weinre工具,Weinre的本意是Web Inspector Remote,它是一种远程调试工具,它可以将远程的页面经过代理在PC上调试页面元素.样式,JS.   Weinre的原理 三个端的含义: 客户端(cli

Weinre —— Web 远程调试工具

Weinre作为一种远程调试工具,在结构上分为三层: 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍: Debug客户端(client):本地的Web Inspector调试客户端: Debug服务端(agent):一个HTTP Server,为目标页面与Debug客户端建立通信.

调试移动端网页工具Weinre的安装及使用教程

使用Weinre工具,Weinre的本意是Web Inspector Remote,它是一种远程调试工具,它可以将远程的页面经过代理在PC上调试页面元素.样式,JS. Weinre的原理 三个端的含义: 客户端(client):本地的WebInspector,远程调试客户端. 服务端(agent):本地的HTTPServer,为目标页面与客户端建立通信. 目标页面(target):被调试的页面,页面已嵌入weinre的远程js. (上面图片及解释转自其他文章) 调试过程: 客户端将指令(请求DO

移动终端开发必备知识 webapp开发与调试

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这

iPhone5和iOS6上HTML5开发的新增功能

开发移动应用到底是选择Native.Web应用或者混合应用?答案是不同的移动应用需要不同的技术,选择合适的就行.其实大多数移动应用,不管是企业移动应用还是互联网移动应用,90%都可以使用基于HTML5的Web技术就足够.在Android 4.0和iOS 6以上浏览器已经是最快的应用了,比任何本地的微博.微信都快,无须更新升级,无须上传分裂的APP市场,无须突然被苹果下架应用.再看看最近发布 Firefox OS 开发手机的配置也大概知道,运行大多数应用不需要那么高配置. 目前主流的智能终端中,i

Hybrid移动应用:用网页技术提供Native体验

  根据最近的一篇报告显示,HTML是移动应用开发人员使用最多的语言,开发人员对于选择哪种网页技术考虑的最主要因素,是代码的跨平台便携性和开发的低成本性.我们常常听说,hybrid app使用起来非常慢,而且设计也很糟糕,让我们看看是否有可能又有原生应用的形,又有我们习惯使用的感. 这篇文章会提供很多关于如何构建良好的hybrid移动应用的线索.代码片段和经验.我将会大致介绍一下hybrid移动应用的开发,包括它的优点和缺点.然后,我会分享一下过去两年我在开发Hojoki和CatchApp时积累

微信web开发者工具怎么用?

   微信web开发者工具是一款由微信公众平台最新发布的开发工具,该工具的发布对于开发者来说,简直就是福音;开发人员通过该软件可方便快捷的在PC电脑端完成开发与测试,而一些用户在初次使用该软件时,不知道如何使用,所以小编为大家带了微信web开发工具的使用方法,需要的用户可参考下!   微信web开发者工具怎么使用 1.微信web开发者工具下载,并安装 2.启动微信web开发者工具 3.登录微信公众号,进入web开发者工具,绑定个人微信号 4.通过个人微信号,登录微信web开发者工具 5.从微信公

微信网页开发者工具是什么

 开发者工具是什么-微信网页开发者工具"> 微信网页开发者工具是什么 微信公众平台日前正式发布了web开发者工具,为帮助开发者更方便.更安全地开发和调试基于微信的网页. 简单来说,这个微信web开发者工具是一个桌面应用,通过模拟手机微信客户端的表现,使得开发者可以用这个工具方便地在PC或者Mac上进行开发和调试工作. 运用自己的微信号来调试微信网页授权; 调试.检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出; 使用基于 weinre 的移动调试功能; 利用集成的

国内大公司的开源项目一览表

奇虎360 https://github.com/Qihoo360 1.MySQL中间层 Atlas Atlas是由 Qihoo 360,  Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了大量bug,添加了很多功能特性.目前该项目在360公司内部得到了广泛应用,很多MySQL业务已经接入了Atlas平台,每天承载的读写请求数达几十亿条. 主要功能:* 读写分离* 从库负载均衡* IP过滤*