java版本安装和调试

首先需要下载 weinre, weinre目前支持Windows与MacOS, 本文中以Windows版为例。

下载地址:http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

点击weinre-jar-1.6.1.zip下载。

然后确保你的电脑已经搭建好了java环境。即安装了jdk。这里就不多说了,在网上搜个jdk,一步步安装及ok。

在下载的weinre.jar所在文件夹中运行以下命令:

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

这行命令会在本机上启动weinre的Debug服务端,端口为8081。打开Chrome或Safari,访问localhost:8081,就可以看到weinre的基本信息。

这里的端口号,你可以随意更改,我电脑上的8081端口不可用,所以我使用1070端口就可以。

由于此版本的weinre在chrome下有问题,因此只能使用safari才能打开。

打开之后,就会有一个"debug client user interface",它是weinre的Debug客户端,点击进入后可以看到目前被测试的目标网页。

如何让我们的网页成为目标网页并且可以被localhost:8081上的weinre检测到呢?很简单,只要往网页面上添加一个js文件就可以了。如果本机的IP为192.168.0.5,那么就添加如下的js文件:

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

当你在移动设备上打开添加了这个脚本的网页后,你就可以在safari的Debug 的客户端的里检测到它了。

点击"debug client user interface"就进入到了调试页面。

之后我们就能在Elements与Console中调试移动端的页面了。

注意:如果看到targets下面为none,就刷新几次,就会出现了。

Weinre的新版本调试

第一种方法:

目前国外有提供PhoneGap的weinre的远程服务,用户可以访问下述网址使用户在线远程调试。

http://debug.build.phonegap.com/

把<script src="http://debug.build.phonegap.com/target/target-script-min.js#anonymous"></script>

这段代码,引入到你的移动端项目的html页面中就行了。但是这种方式,需要你的网速比较好,不然会有点慢。

第二种方式:

1. 首先保证你安装了nodejs环境,如果没有,先去https://nodejs.org/下载安装。

2. nodejs v0.10已经集成了npm,所以可以直接使用npm安装weinre,在cmd中敲:npm install weinre -g。

3. 安装完成后,你会在目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下看到weinre,这便是它的主目录了。

4. 在cmd中运行weinre --boundHost -all-,就会启动weinre服务。然后在浏览器中输入cmd中显示的地址:IP地址和端口号。

我这里是:http://10.18.221.16:1070

默认情况是:localhost:8080.

你可以设置成自己电脑上的ip地址和任意没有使用的端口号。

使用此命令启动weinre:weinre --boundHost ip --httpPort 端口号

后面的步骤,跟上面的方式是一样的。

此方法,在chrome和safari中都可以使用。

注意:如果在调试页面中,没有显示完整页面上的元素,请刷新一下网页,然后选择那个链接,最后再点击element,就可以看到页面上完整的元素了。

虽然使用weinre进行调试时,会有突然断开,有时需要刷新多次才能连上,有时需要重新安装才能连上等一系列的问题,但是没有它,你根本无法进行页面调试。期待它的改进,然后希望博友能够推荐更好的调试工具,当然你必须知道怎么使用,才推荐。

加油!

移动端调试工具-Weinre的更多相关文章

  1. 移动端调试工具weinre

    前段时间在大豹公众号上看到一个关于移动端调试的工具,了解了一下,确实不错. npm install -g weinre 先全局安装,然后使用的时候通过如下命令启动 weinre --boundHost ...

  2. 移动端调试工具weinre安装教程(java版)

    先申明:本安装教程是基于java的jdk安装的,经过测试可以正常使用,基于nodejs的安装,小喵鼓弄了好几天也没有成功,如果哪位童鞋基于nodejs安装成功了,请联系小喵,小喵在这里先谢谢你了! 好 ...

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

    如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...

  4. 转 Web移动应用调试工具——Weinre

    如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...

  5. 移动前端调试工具-Weinre真机调试

    之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移 ...

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

          如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebu ...

  7. Mobile Web调试工具Weinre (reproduce)

    Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而 ...

  8. 发现一款移动web端远程调试工具weinre , 哈哈!

    之前调试一直用的是chrome的远程调试,虽然效果很不错,但是在调试cordova,微信时多有不便. 在git上找工具时发现了这个:weinre,使用方法非常简单 附上git地址: https://g ...

  9. webapp调试工具weinre的使用

    在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某 系统浏览器下页面怎么怎么滴.看着满满的测试汇总文档,我们曾经 ...

随机推荐

  1. python数据结构与算法——队列

    队列结构可以使用数组来模拟,只需要设定头和尾的两个标记 参考自<啊哈> # 按书中的代码会出现索引越界的问题(书中申请了超量的空间) # 尝试令tai初始为len(q)-1则不会出错但少了 ...

  2. C++ 文件读取

    #include <iostream> #include <fstream> #include <string> using namespace std; int ...

  3. H5版俄罗斯方块(3)---游戏的AI算法

    前言: 算是"long long ago"的事了, 某著名互联网公司在我校举行了一次"lengend code"的比赛, 其中有一题就是"智能俄罗斯方 ...

  4. Erlang 102 Erlang并发编程

    笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期              变更说明 2014-11-02 A outline 2014 ...

  5. 部分用到的python代码

    replace file extensions # change .htm files to .html for file in *.htm ; do mv $file `echo $file | s ...

  6. Javascript 中的 && 和 || 使用小结

    准备两个对象用于下面的讨论. var alice = { name: "alice", toString: function () { return this.name; } }; ...

  7. Python 爬虫学习 urllib

    网页抓取 # -*-coding: utf-8 -*- import urllib url = "http://www.cndzz.com/" html = urllib.urlo ...

  8. PyCharm/IntelliJ IDEA Golang开发环境搭建(最方便快捷的GO语言开发环境)

    IntelliJ太牛了.为了配置Go语言开发环境,折腾了半天,下IDE(Sublime Text,IntelliJ Idea),然后装Go插件.装Go插件还要下载插件项目源码,编译等等,Sublime ...

  9. Android总结篇系列:Activity Intent Flags及Task相关属性

    同上文一样,本文主要引用自网上现有博文,并加上一些自己的理解,在此感谢原作者. 原文地址: http://blog.csdn.net/liuhe688/article/details/6761337 ...

  10. Hadoop学习12-配置集群环境

    由于之前虚拟机都是用的桥接方式,有时候没有网络可用,想学习的时候,就狠不方便. 于是研究了一下,希望搭建一个多台虚机组成一个局域网的集群,即host-only方式 1.安装VM,网络选择“host-o ...