使用weinre在PC端同步远程调试移动端页面（在xampp上部署项目到Tomcat,并通过外网访问(图解). ）

（一）weinre

1.简介

weinre是一款非常好用的远程调试工具。功能与网页浏览器的开发者工具基本类似，但这个工具更适合用于移动端web的调试。

2.安装

weinre基于nodejs，因此首先要安装nodejs，然后使用npm进行安装：

npm -g install weinre

3.运行

weinre --httpPort 8081 --boundHost -all-

主要参数解析：

httpPort	调试服务器运行的端口，默认8080
boundHost	调试服务器绑定的IP地址或域名，默认localhost

 

 

4.修改目标文件

使用webkit的浏览器（NOTE:由于weinre的设计更多的是基于webkit的浏览器，因此建议使用chrome/safari）访问weinre服务器：http://localhost:8081

 　　　　


打开debug面板：http://localhost:8081/client/#anonymous

　　　　


获取本机的IP地址，例如：192.168.1.101，添加如下js文件到需要调试的目标文件的头部：

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

5.在移动设备上访问本机IP地址

并且在debug面板中可以监听到移动设备对目标页面的访问：

6.Ending

之后的操作，就跟PC端浏览器debug一样简单了... :)

其它说明

1. 用手机连续访问多页面，这些页面都会在targets中列出，选中其中一个，即可进行调试。
2. 点击调试页面中的remote, 可以从调试页面切回targets列表。
3. 尽管文档上说client要在基本webkit核的浏览器上使用（Google Chrome， Apple Safari， Other
recent-ish WebKit-based browsers ）， 但亲测firefox上貌似也能玩转。
4. 也是最重要的。server与target和client一定要能互联互通，这样才可以调试。

一些局限性
1. elements部分，可以查看dom，修改样式。但无法直接编辑dom
2. resource部分，localstorage可以查看，但cookie看不到。
3. network部分，只能看到异步加载的请求。（也许我用的方法有问题?）
4. cosole部分，可以看console log， 运行js。但无法像firebug那样报出js的错误，更不能加断点调试。
anyway， 即使是这样，也为我们的调试提供了一定程度的便利。总比闭起眼乱碰好的多。
特别是当你要调试iphone页面，手上又无mac book时，试试weinre吧。
啥？你连iphone都没有！？god bless you~

（二）在xampp上部署项目到Tomcat,并通过外网访问(图解).

一、安装XAMPP及测试 

①首先下载最新版本的XAMPP 1.7.7 for Windows 

    Apache 2.2.21 

    MySQL 5.5.16 

    PHP 5.3.8 

    phpMyAdmin 3.4.5 

    FileZilla FTP Server 0.9.39 

    Tomcat 7.0.21 (with mod_proxy_ajp as connector) 

②安装或者解压下载文件。本机下载的是ZIP包，解压地址为：F:\xampp 

打开XAMPP 所在的文件夹，并运行其中的“setup-xampp.bat”，然后点击“xampp-control.exe”。xampp1.7.7上已经整合了Tomcat7了，不用再去下载connector了，然后配置文件，省了不少时间。 


  

③改配置文件为了避免端口冲突。 

●F:\xampp\apache\conf\httpd.conf 
Listen 80 

ServerName localhost:80 

Listen 1109 
ServerName localhost:1109 
启动服务后访问地址：http://localhost:1109/xampp/ 



   
●F:\xampp\tomcat\conf\server.xml 
<Connector port="8080" protocol="HTTP/1.1" 
               connectionTimeout="20000" 
               redirectPort="8443" /> 
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" /> 
 



  
这两个地址都是可以访问的，因为已经整合到一起了。还有个端口8009这个要和httpd-ajp.conf文件一致。  http://localhost:8080/examples/  http://localhost:1109/examples/ 
Apache Tomcat页面→http://localhost:8080/ 
以上将localhost换成局域网IP地址，内网的机器都可以访问了。 

二、导出Java工程到Tomcat，并配置文件允许其外网访问。 

①导出工程为war文件。在Eclipse里面选中工程，File→Export。 



 



  
将导出的包直接放到TOMCAT目录(F:\xampp\tomcat\webapps\)下就可以了。 

②关键就是配置Apache AJP Proxy configuration这个文件httpd-ajp.conf。就是用代理模块mod_proxy实现了Apache的代理/网关。 
●F:\xampp\apache\conf\extra\httpd-ajp.conf 
默认：ProxyPass /examples ajp://127.0.0.1:8009/examples smax=0 ttl=60 retry=5 
添加：ProxyPass /techpro ajp://127.0.0.1:8009/techpro smax=0 ttl=60 retry=5 
类似于在server.xml里面加的Context。模块mod_proxy以及后面的参数意思可以查看官网 
官网：http://httpd.apache.org/docs/2.2/en/mod/mod_proxy.html 
中文翻译：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_proxy.html 

③设置路由器端口转发。各个路由器有所不同。(Google：路由器端口转发) 



   
④查询本机的公网IP。(如果以下地址失效请Google：公网ip) 
http://www.net.cn/static/customercare/yourIP.asp 
⑤用公网IP访问项目。  http://公网IP:1109/examples/  http://公网IP:1109/techpro/

参考：http://www.cnblogs.com/diva/p/3995674.html
http://xly3000.blog.163.com/blog/static/1324247201231635121542/