使用weinre和fiddler搭建Mobile Web调试环境

在开发应用页时，经常存在调试的需求。对于纯H5的部分可以在浏览器里根据响应式视图模拟，但在Hybrid模式下对于和Native经常交互的情况，浏览器就无能为力了。此时可以使用weinre和fiddler来配合调试。

weinre

weinre是apache的一个小工具,主页[http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html]
weinre全称weinre is WEb INspector REmote。

weinre调试的机制是通过嵌入js将调试信息回传到weinre服务器，并且支持查看dom结构和css信息.

weinre使用npm安装

npm install -g weinre

启动

weinre –boundHost 192.168.0.16 –httpPort 8889

打开[http://192.168.0.16:8889/]可以看到weinre的界面，可以看到有个[debug client user interface: http://192.168.0.16:8889/client/#anonymous]。

还有个target script，复制样例标签[]到需要调试的页面.
然后打开调试页面，在http://192.168.0.16:8889/client/#anonymous就可以查看我们需要的信息了。

总结下weinre的优缺点：
- 优点：支持查看console输出的log，可以查看实时dom结构和css信息
- 缺点:

     1.  嵌入js，具有侵入性，适合单页面调试，但对多页面则不理想
     2. 响应延迟，采用了缓冲机制
     3. element面板是类似用html模拟的firebug，不支持修改且响应缓慢

总的来说，weinre还是可以有效帮助调试，让我们不至于盲写。

fiddler

fiddler是一个免费的web代理，前端工程师必备。
通过fiddler可以过滤我们关心的http请求，查看请求内容和响应。配合weinre可以解决大部分Mobile Web的调试需求

fiddler的主页http://www.telerik.com/fiddler

下载安装即可.
使用时要注意mobile要和代理在同一个网段.fiddler的默认端口是8888.