前端开发工具-移动端调试工具集
当我们进行移动端开发时，会出现一个难堪的问题—那就是我们不能像 pc 运行 web 一样可以实时通过开发人员工具来发挥 Elements、Sources、NetWork、Console 这些调试功能。而作为开发人员，使用 DevTools 调试网页是必须的。
在实际开发中，我们有很多方法来完成这些功能。本文将讲解其中某些问题的解决方案，并着重讲解强大的 weinre 工具实现移动端网页调试。
【代理抓包】
抓包软件，windows 可以使用 fiddler，mac 可以使用 charles。但 mac 上面 charle 是收费的，我们可以使用后文更强大的.
charles
激活很简单。比 wistle 的稳定性和速度要强，毕竟上原生应用。
破解文件在这里可以下载：http://charles.iiilab.com/
IOS 进行 https 抓包可以参考这里: http://www.jianshu.com/p/9822e3f28f0a
【移动端调试-weinre】
教程：https://www.cnblogs.com/duanhuajian/archive/2012/10/28/2743832.html
weinre（读作 /吴恩俄/），它就像 FireFox 浏览器中的 FireBug 和 Webkit 内核浏览器的 Web Inspector
其实他原理在本质上，就是调试器（web inspector）与手机端页面，都通过 websocket 与中央的 控制server 通信， 本地调试器修改的指令发送给控制 server 后，它会转化为移动端页面的 js 动作交给 target 页面执行。 页面上的日志、网络请求也被 js 拦截发送给中央控制 server，该 server 再将其转化为调试器要显示的内容发送给调试器。
https://www.cnblogs.com/shytong/p/5240137.html
http://blog.csdn.net/freshlover/article/details/42640253
虽然其配置是在不发生歧义时是可以互换左右位置的，但是仍然建议左侧写 pattern 右侧写操作。而且 whistle 支持多个 operator：
组合模式
pattern operator-uri1 operator-uri2 operator-uriN
【whistle】
imweb 教程：http://imweb.io/topic/5981a34bf8b6c96352a59401
values
是自定义的一些字符串（相当于让你快速创建一个本地文件，例如一个 js 脚本）
然后就可以在配置 pattern 的时候让某个请求转发给这个 value 脚本，或者通过log操作把 value 脚本注入到页面里。
whistle 里使用 weinre：
其实 log 操作就利用了 weinre。
最终因为 whistle 里面打印 log 无效，以及集成的 weinre 不知什么原因不能生效，我放弃了使用 whistle…
wistle 这种还是不太成熟。不过简单的 https 抓包也可以用它: https://www.jianshu.com/p/28d5b3cc6efd
【vConsole】
对于简单的日志查看，我们可以考虑在代码中使用 alert 打印或者将日志显示在页面的某个位置。但这样总会破坏页面流程和 UI。 有一种方法，就是将日志放在一个 fixed 的可开关按钮中，这种方法已经由微信团队开发为一个开源工具 vConsole, 并在打印日志的基础上对 ajax 请求进行了拦截，所以利用 vConsole 你可以在页面中查看 log 日志、查看 ajax 请求调用、查看页面 dom 结构。
当然，由于是纯前端 js 实现，且不像 weinre 将 target 页面传递到 PC 使用 webkit intspector 调试，因此他无法实现 DOM 修改，css 修改等功能。
其实日志打印，可以传送给远程网站进行展示，这也就相当于http://jsconsole.com/ 这家网站提供的类似 weinre 服务了。
【远程调试的未来】
因为 Weinre 是使用 javascript 编写的， 并不支持底层的断点调试等功能；而且 ajax 请求也只能等到请求结束才能看到。现在的 V8 并不包含调试模块， 只有最新的 webkit 协议才拥有 web 调试特性， 如果手机上的浏览器具有了这样的调试特性， 那么只要通过远程协议就可以在 PC 上调试远程 mobile 页面。Safari， 与 Chrome 浏览器已经加入了远程调试特性
Chrome 开发者工具使用了很多 native 的代码来实现调试功能，而 Weinre 是完全基于 JS 的，没有包含任何 native 代码， JS 并没有对本地的断点等的功能的支持。
Refer
weinre 官网
http://web.jobbole.com/82967/
http://blog.csdn.net/wuyajun1124/article/details/41622987
whistle 官网