webapp开发调试环境--weinre配置

    用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就需要我们进行微调。     在pc上微调后发布到测试环境再在手机上看效果,开发很慢,效率很低。这时候就想着有一个可以在手机上调试的工具,可以随时更改参数随时看到手机上的效果,免去发布再测试、模糊估计参数不精准的麻烦,weinre就是一个这样的工具。     weinre可以在PC上远程调试手机上的页面,和pc浏览器的调试工具类似,在pc上选择代码中的某个标签,对应在手机网页上的部分就会被高亮选中,在pc上更改属性参数,可以立即在手机上看到效果,如下图:


weinre的配置和使用方法: 一.配置环境

1. 首先保证你安装了nodejs环境,如果没有,先去官网下载安装。

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

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

4. 在cmd中运行weinre --httpPort 8081 -boundHost -all- ,启动weinre:在调试过程中保持cmd窗口不关闭

打开浏览器访问192.168.0.20:8081(192.168.0.20是我的本地局域网IP地址,这里需要改成你的),如果出现如下页面,就说明安装成功:

点击debug client user interface:

5.  PC端在本地搭建服务器 weinre已经包含了一个http服务器,它的根目录就是C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web。该目录下放置目标页面。为了组织好你的目标页面,可以在当前目录下新建一个文件夹,如www。

试试在PC上访问192.168.0.20:8081/demo/weinre-demo.html


注意:此句是关键:weinre --httpPort 8081 -boundHost -all-  一定要这样写,区分大小写 --httpPort 8081 :设置访问端口,如果没有这句默认情况下是8080端口。Port首字母必须大写,不大写则设置端口不成功,仍未默认的8080:

另外建议不要用默认的8080端口,改成8081.。因为eclipse在运行项目的时候会用到8080端口,如果把weinre的端口设置成了8080,再启动eclipse的时候,eclipse提示端口冲突运行不起来,可以尝试以下办法关掉占用的8080端口:

 -boundHost -all- :这句是保证用127.0.0.1:8081, localhost:8081, 192.168.0.20:8081(192.168.0.20是我的本地局域网IP地址)都可以访问,没有这句或者少了-boundHost 或者Host没有首字母大写,都不能保证 192.168.0.20:8081可以访问,这点狠重要,因为在手机上只可以访问 192.168.0.20:8081


二.使用weinre调试 1.  PC端访问调试端页面:192.168.0.20:8081 。 2. 手机访问PC服务器目标文件 1.  PC端访问调试端页面:192.168.0.20:8081/client#anonymous #anonymous为默认的ID,可以改为自定义的ID,这个可以用于多用户调试,参考:http://wyqbailey.diandian.com/post/2011-11-09/20511143

2.手机访问放在服务器内的目标页面: 注意:手机需要连接无线wifi,wifi的地址需要和电脑的IP为同一个网段。比如公司所有电脑在一个局域网,其中一台电脑作为服务器发射出无线wifi,手机直接连接上此wifi,就可以访问weinre服务器了。

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

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

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

(192.168.0.20是我的本地局域网IP地址,这里需要改成你的)      添加后在移动设备中访问该页面即可,如果调试的页面比较少可以使用这个方法,如果多的话推荐第二种方法

(2)、Target Bookmarklet(此方法我没弄成功,如果你们知道怎么弄得,再共享下)     该方法是将一段js保存到移动设备的书签中,可以在 http://192.168.0.20: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了。


下面看下效果,这里我用weinre自带的demo页面做示例: 手机连接wifi后访问:192.168.0.20:8081/demo/weinre-demo.html

这时再返回PC看看http://192.168.0.20:8081/client/页面,就出现了手机上访问的目标页面地址:

点击链接,变成绿色,点击上方的elements,就可以调试啦,也就出现了最开始的截图效果:

更改下属性,看看手机上的效果吧~~

注意:当对html文件有更改时,更改的内容不会同步到手机端,必须在PC也访问该页面,进行刷新后,手机端才会同步更新的内容。


总结: 此种方法虽然可以在手机上实时看到调试的效果,但每次都需要把本地的静态文件移到weinre服务器下,然后对目标页面加上js头部,遇到只有jsp没有本地静态html的页面,要么把jsp页面全部或部分转化成html然后放到weinre服务器要么不转化闭着眼睛估计参数修改后发布再看效果......有一定的局限 (我试过将本地静态文件的地址和weinre服务器的地址合并为同一个,这样就不用经常拷贝新版本,但发现weinre安装的默认路径是C:\Users\hp\AppData\Roaming\npm\node_modules,不知道怎么更改此路径o(╯□╰)o,如果你们知道可以进行尝试下) 建议开发webapp时,在PC上全程开发,发布测试版后对手机上错乱的界面且无法利用PC调试的部分用此方法进行调试。 对于手机端访问PC上的静态文件,还可以有以下两种方法(只能访问看效果不能实时调试): 1. 利用nginx 打开nginx配置文件:

重启nginx,手机连接无线网,访问:192.168.0.20/static/login-register/login.html试试吧~ (192.168.0.20是我的本地局域网IP地址,后面的是在我配置的路径D:\woqu_work_svn\m下的文件路径,这里需要改成你的) 注意:手机需要连接无线wifi,wifi的地址需要和电脑的IP为同一个网段。比如公司所有电脑在一个局域网,其中一台电脑作为服务器发射出无线wifi,手机直接连接上此wifi,就可以访问weinre服务器了。 2. 将静态文件上传至自己的服务器空间 比如,可以将静态文件上传至自己的域名空间,然后手机访问域名地址(这样做当然是可以访问的了O(∩_∩)O~)  建议: 1.webapp开发的时候,将可以连接的页面加上跳转链接,这样我们在手机上访问测试的链接时,就可以在访问的页面跳转到其他页面,而不用测试一个页面输入一个链接地址,可以输入一次测试多个页面。而对可以连接的页面加上跳转链接对后台人员的更改也没有影响。 2.另外对于从html改到jsp的页面,如果在后期前端人员在jsp上有改动,那么也把改动一并同步到html,这样对后面的测试有帮助,而同步到html的部分也只是部分的改动,并不麻烦。 参考: http://www.cnblogs.com/lvdabao/p/3436620.html​ 如有不正欢迎指出~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

google C++编程风格指南之头文件的包含顺序

(1)为了加强可读性和避免隐含依赖,应使用下面的顺序:C标准库、C++标准库、其它库的头文件、你自己工程的头文件。不过这里最先包含的是首选的头文件,即例如a.c...

12010
来自专栏JetpropelledSnake

Python Web学习笔记之Python多线程和多进程、协程入门

进程和线程究竟是什么?如何使用进程和线程?什么场景下需要使用进程和线程?协程又是什么?协程和线程的关系和区别有哪些? 程序切换-CPU时间的分配 首先,我们的任...

40050
来自专栏后端技术探索

Nginx如何做流量控制

英文原文:https://www.nginx.com/blog/rate-limiting-nginx/

63340
来自专栏生信技能树

github极简指南

入生信的坑已经3年多了,但开始github的旅程才一年多,起初主要是为了建立bioconductor中文社区而学习的,现在也在自己的github上面分享了不少代...

38840
来自专栏IT笔记

分享一款JVM线程堆栈在线分析工具

JVM大家可能都知道是个什么玩意-Java虚拟机,但是到底是个什么鬼?相信即使工作3-5年的程序员可能也不大了解。 ? 如题所述,今天与大家分享的是如何分析...

3.2K60
来自专栏PHP在线

post和get请求方式以及区别

1.一些枯燥的概念: Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE。 URL全称是资源描述符,我们可以...

32080
来自专栏懒人开发

ZooKeeper入门

我们知道,著名的hadoop,kafka,dubbo 都是基于zookeeper而构建。

37920
来自专栏运维技术迷

Shell系列-Shell概述

一、shell环境及特性 1.什么是shell? 负责向内核翻译以及传达用户/程序指令,相当于操作系统的”外壳”.在Linux中默认shell一般为/bin/b...

28250
来自专栏散尽浮华

nginx+php负载均衡集群环境中的session共享方案梳理

在网站使用nginx+php做负载均衡情况下,同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,就会出现很多问题,比如说最常见的登...

84770
来自专栏数据和云

运维经验:回滚段异常的特殊救急方法

? 冷菠 冷菠,资深DBA,著有《Oracle高性能自动化运维》,有近10年的数据库运维、团队管理以及培训经验。擅长数据库备份恢复、数据库性能诊断优化以及数据...

45190

扫码关注云+社区

领取腾讯云代金券