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?

如有不正欢迎指出~~