移动端调试工具-Weinre
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地址和端口号。
默认情况是:localhost:8080.
你可以设置成自己电脑上的ip地址和任意没有使用的端口号。
使用此命令启动weinre:weinre --boundHost ip --httpPort 端口号
后面的步骤,跟上面的方式是一样的。
此方法,在chrome和safari中都可以使用。
注意:如果在调试页面中,没有显示完整页面上的元素,请刷新一下网页,然后选择那个链接,最后再点击element,就可以看到页面上完整的元素了。
虽然使用weinre进行调试时,会有突然断开,有时需要刷新多次才能连上,有时需要重新安装才能连上等一系列的问题,但是没有它,你根本无法进行页面调试。期待它的改进,然后希望博友能够推荐更好的调试工具,当然你必须知道怎么使用,才推荐。
加油!
移动端调试工具-Weinre的更多相关文章
- 移动端调试工具weinre
前段时间在大豹公众号上看到一个关于移动端调试的工具,了解了一下,确实不错. npm install -g weinre 先全局安装,然后使用的时候通过如下命令启动 weinre --boundHost ...
- 移动端调试工具weinre安装教程(java版)
先申明:本安装教程是基于java的jdk安装的,经过测试可以正常使用,基于nodejs的安装,小喵鼓弄了好几天也没有成功,如果哪位童鞋基于nodejs安装成功了,请联系小喵,小喵在这里先谢谢你了! 好 ...
- Web移动应用调试工具——Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...
- 转 Web移动应用调试工具——Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web ...
- 移动前端调试工具-Weinre真机调试
之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移 ...
- Web移动应用调试工具——Weinre
如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebu ...
- Mobile Web调试工具Weinre (reproduce)
Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而 ...
- 发现一款移动web端远程调试工具weinre , 哈哈!
之前调试一直用的是chrome的远程调试,虽然效果很不错,但是在调试cordova,微信时多有不便. 在git上找工具时发现了这个:weinre,使用方法非常简单 附上git地址: https://g ...
- webapp调试工具weinre的使用
在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某 系统浏览器下页面怎么怎么滴.看着满满的测试汇总文档,我们曾经 ...
随机推荐
- python数据结构与算法——队列
队列结构可以使用数组来模拟,只需要设定头和尾的两个标记 参考自<啊哈> # 按书中的代码会出现索引越界的问题(书中申请了超量的空间) # 尝试令tai初始为len(q)-1则不会出错但少了 ...
- C++ 文件读取
#include <iostream> #include <fstream> #include <string> using namespace std; int ...
- H5版俄罗斯方块(3)---游戏的AI算法
前言: 算是"long long ago"的事了, 某著名互联网公司在我校举行了一次"lengend code"的比赛, 其中有一题就是"智能俄罗斯方 ...
- Erlang 102 Erlang并发编程
笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期 变更说明 2014-11-02 A outline 2014 ...
- 部分用到的python代码
replace file extensions # change .htm files to .html for file in *.htm ; do mv $file `echo $file | s ...
- Javascript 中的 && 和 || 使用小结
准备两个对象用于下面的讨论. var alice = { name: "alice", toString: function () { return this.name; } }; ...
- Python 爬虫学习 urllib
网页抓取 # -*-coding: utf-8 -*- import urllib url = "http://www.cndzz.com/" html = urllib.urlo ...
- PyCharm/IntelliJ IDEA Golang开发环境搭建(最方便快捷的GO语言开发环境)
IntelliJ太牛了.为了配置Go语言开发环境,折腾了半天,下IDE(Sublime Text,IntelliJ Idea),然后装Go插件.装Go插件还要下载插件项目源码,编译等等,Sublime ...
- Android总结篇系列:Activity Intent Flags及Task相关属性
同上文一样,本文主要引用自网上现有博文,并加上一些自己的理解,在此感谢原作者. 原文地址: http://blog.csdn.net/liuhe688/article/details/6761337 ...
- Hadoop学习12-配置集群环境
由于之前虚拟机都是用的桥接方式,有时候没有网络可用,想学习的时候,就狠不方便. 于是研究了一下,希望搭建一个多台虚机组成一个局域网的集群,即host-only方式 1.安装VM,网络选择“host-o ...