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端在本地搭建server

weinre已经包括了一个httpserver,它的根文件夹就是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 :设置訪问port,假设没有这句默认情况下是8080port。Port首字母必须大写,不大写则设置port不成功,仍未默认的8080:

另外建议不要用默认的8080port,改成8081.。由于eclipse在执行项目的时候会用到8080port,假设把weinre的port设置成了8080,再启动eclipse的时候,eclipse提示port冲突执行不起来,能够尝试下面办法关掉占用的8080port:

 -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. 手机訪问PCserver目标文件

1.  PC端訪问调试端页面:192.168.0.20:8081/client#anonymous

#anonymous为默认的ID,能够改为自己定义的ID,这个能够用于多用户调试,參考:http://wyqbailey.diandian.com/post/2011-11-09/20511143

2.手机訪问放在server内的目标页面:

注意:手机须要连接无线wifi,wifi的地址须要和电脑的IP为同一个网段。比方公司全部电脑在一个局域网,当中一台电脑作为server发射出无线wifi,手机直接连接上此wifi,就能够訪问weinreserver了。

为了让须要调试的页面被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也訪问该页面,进行刷新后,手机端才会同步更新的内容。



总结:

此种方法尽管能够在手机上实时看到调试的效果,但每次都须要把本地的静态文件移到weinreserver下,然后对目标页面加上js头部,遇到仅仅有jsp没有本地静态html的页面,要么把jsp页面所有或部分转化成html然后放到weinreserver要么不转化闭着眼睛预计參数改动后公布再看效果......有一定的局限

(我试过将本地静态文件的地址和weinreserver的地址合并为同一个,这样就不用常常拷贝新版本号,但发现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为同一个网段。比方公司全部电脑在一个局域网,当中一台电脑作为server发射出无线wifi,手机直接连接上此wifi,就能够訪问weinreserver了。

2. 将静态文件上传至自己的server空间

比方,能够将静态文件上传至SAE(新浪云)或自己的域名空间,然后手机訪问域名地址(这样做当然是能够訪问的了O(∩_∩)O~)

建议:

1.webapp开发的时候,将能够连接的页面加上跳转链接,这样我们在手机上訪问測试的链接时,就能够在訪问的页面跳转到其它页面,而不用測试一个页面输入一个链接地址,能够输入一次測试多个页面。而对能够连接的页面加上跳转链接对后台人员的更改也没有影响。

2.另外对于从html改到jsp的页面,假设在后期前端人员在jsp上有修改,那么也把修改一并同步到html,这样对后面的測试有帮助,而同步到html的部分也仅仅是部分的修改,并不麻烦。

參考:

http://www.cnblogs.com/lvdabao/p/3436620.html?

如有不正欢迎指出~~

时间: 2024-10-14 04:35:52

webapp开发调试环境--weinre配置的相关文章

golang在Windows下Sublime Text开发调试环境的配置

一.前言 近期本人有工作调动,进入了一个全新的领域[golang]服务端开发.在此写下本文,希望给那些没接触过golang开发调试环境及还在犹豫选择那家golang IDE而纠结的朋友们一点点帮助,如果你从中得到了受益并且同时拥有博客园账户的话,衷心希望能得到你的一个小小[推荐]以资鼓励. 本人操作系统为Windows 8.1 64bit,开发工具选择如下:go1.4.2.windows-amd64Sublime Text 2(插件GoSublime/GoGdb) gdb.gcc(安装mingw

配置Windows 2008 R2 64位 Odoo 8.0/9.0 源码开发调试环境

安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 并将下列路径加到PATH环境变量: C:\Python27\;C:\Python27\Scripts; 3.安装: Oracle jdk 1.7 到C:\Java 并配置 JAVA_HOME 环境变量,如 C:\Java\jdk1.7.0_71 4.安装: PostgreSQL 9.4.4-3 x

PHP开发调试环境配置

——基于wamp和Eclipse for PHP Developers 引言 为了搭建PHP开发调试环境,我曾经在网上查阅了无数的资料,但没有一种真正能够行的通的.因为PHP开发环境需要很多种软件相互配合,软件之间版本必须相互匹配,而具体到底怎么个匹配法也很难说,至于最新版本的软件之间相互匹配就更加缺少相应的资料了.哪怕版本之间有细微的版本不匹配情况,最后的结果都会是徒劳无功. 不过,通过不懈的坚持和努力,在失败了一次又一次之后,终于在凌晨1点半将PHP开发调试环境全部搭建完毕,看到运行网页后,

手把手教hadoop2.5.1+eclipse开发调试环境搭建(2)

前一篇博文我们搭建了好了运行环境,这篇小文我们开始搭建开发调试环境.这才是真正的精华,是无数血泪铸就的! 4.eclipse,又见eclipse 这个我想只要是做java的没有不熟悉,因此我就不再多说了,一切向http://www.eclipse.org索取. 注意,这里的eclipse环境安装在虚拟机中哦,别装错地方了! 5.安装maven环境 去maven.apache.org上下载maven3,解压到/home(因为/home一般是数据盘,装在这里不占系统盘的空间).配置~/.bash_p

玩转VSCode-完整构建VSCode开发调试环境

原文:玩转VSCode-完整构建VSCode开发调试环境 随着VSCode的不断完善和强大,是时候将部分开发迁移到VS Code中了. 目前使用VS2019开发.NET Core应用,一直有一个想法,在VS Code中复刻VS的开发环境,同时迁移到VS Code. 那么现在就开始吧. 首先,安装最新版的VS Code:https://code.visualstudio.com/,安装完成后可能会提示升级,升级即可,升级后的版本信息: 版本: 1.40.1 (system setup) 提交: 8

Java开发常用环境变量配置

1. JDK变量名:JAVA_HOME变量值:D:\Program Files\Java\jdk1.7.0_25(即JDK的安装路径)配置解析:方便引用.归一原则(%JAVA_HOME%),第三方软件约定. 变量名:Path(该变量名在系统变量中已经存在)变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin配置解析:使系统在任何路径下都可以识别javac,java命令. 变量名:classpath变量值:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib

在cocos code ide的基础上构建自己的lua开发调试环境

现在无论是端游还是手游(基于cocos2d)的开发, 基本模式都是c++内核 + lua逻辑的路线.对于c++的开发和调试, vs已经能很好的满足开发者的需求, 微软这方面真是值得称颂.不幸的是, lua的开发和调试,还没有一个统一的,方便的开发调试环境,这也给广大的luaer和项目造成了极大的困扰.目前通常的做法大致有如下几种: 1.纯粹意义上的lua编辑器, 如Sublime Text 2 + 插件的模式,解决了代码提示和补齐问题. 2.编辑器的基础上加入调试功能, 通常是直接在vs上开发一

android开发-wifi连接eclipse开发调试环境

android开发请远离数据线! 方法很简单: 第一步,首先你需要在你的手机上安装一个终端模拟器工具,这里我推荐 androidterm_1,0,48.apk,搜下各大app store都会下载到. 第二步,在手机打开这个终端工具,输入命令: su//获取root权限 setprop service.adb.tcp.port 5555//设置监听的端口,端口可以自定义,如5554,5555是默认的 stop adbd//关闭adbd start adbd//重新启动adbd 第三步,记录下你手机

移动端Web开发调试之Weinre调试教程

在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴.看着满满的测试汇总文档,我们曾经在一个又一个知名或不知名的手机终端上重复着这些工作:仔细的排查代码,alert可疑的变量,甚至不惜重构来尝试解决这种不一致的问题.虽然说Android 4.0+以上的移动设备支持桌面版Chrome远程调试,而且在Android 4.4以下也仅限于预览Chrome手机版浏览器内部效果,我们无法在问题浏览