最常用的实时开发调试工具firebug、web inspector、ie developer等，对前端开发者来说已经很熟悉了，在移动互联网越发火热的今天，作为一个新的前端开发环境，前端开发者用pc独立开发已不能更高效的满足移动开发的需求，而移动前端开发是比较新的一个开发分支， js、html5、css3没有像native client端的visual studio 、mac或大型手机厂商下那样统一成熟的模拟器开发环境或远程手机调试环境， web前端开发者大部分开发调试时只能通过代码上传至远程服务器，然后手机浏览器登录服务器，远程整页刷新看效果，pc上的webkit也不能100%模拟手机web环境。

于是调研了一下，通过如题的各种工具搭建了一个windows上的前端开发环境。首先安装工具下载：

1. phpstudy：一键安装web server各种环境的工具，个人推荐感觉非常快速方便http://phpstudy.softonic.cn/

2. fiddle： http://www.fiddler2.com/fiddler2/version.asp

3. jdk：http://www.java.com/en/download/index.jsp

4. weinre：http://ishare.iask.sina.com.cn/f/23607399.html 这里直接下载jar包，得说一下，jar包在官方的连接坏了 http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/Installing.html ，用git clone在github下载的话，还得配jvm或shell编译环境，不如直接jdk执行jar方便。

安装好apache和jdk，打开window console(win+R 命令cmd)找到weinre.jar的目录，敲入如下命令并回车：

java -jar weinre.jar --httpPort 1070 --boundHost -all-

打开本地浏览器，输入本机在局域网的ip（例10.208.66.65），端口为1070

http://本机ip:1070如图：

这样远程移动的服务器就配好了，打开 http://192.168.0.1:1070/client/#anonymous 如图：

这就是weinre的远程调试器，跟webkit的web inspector一样，“Targets”为你的远程移动设备，没有连接显示为none。

接下来usb连接移动设备，本人连的iphone4（要求移动设备有wifi无线连接，且最好同一网段，如果不在，关闭windows防火墙，保证能ping通移动设备。

拿出要调试的页面文件index.html，页面中插入http://10.208.66.65:1070/target/target-script-min.js#anonymous,

放至web server的WWW目录下。

在手机的页面中打开http://10.208.66.65/index.html ,这样pc上可以显示target了：

如上图就代表远程联通手机，可以远程实时调试如下：