whistle是一款基于Node.js的跨平台网页调试代理工具。可以作为普通的http代理使用，也可以用来抓取、修改、操作http、https、websocket、tunnel请求，例如：修改hosts、请求方法、响应状态码、请求（响应）头、请求（响应）)内容等，基本可以操作web请求的方方面面，支持插件扩展功能。本文主要讲述如何使用whistle调试手机页面，安装和使用whistle等内容，请参考Github：https://github.com/avwo/whistle。移动端调试遇到的问题相比PC端，在移动端调试网页主要有以下三个问题：没有console，看不到页面的js错误，通过console输出调试日志.xxxcannotbeviewedmodified无法调试页面的DOM结构和样式。一般情况下，手机页面都是在PC端Chrome浏览器的模拟器上调试的，但并不是所有的手机端页面都可以在PC模拟器上调试。比如有些页面需要调用本地API的APPApp内嵌页面，或者测试页面兼容性问题等，只有在真机上运行才能看到真实效果。这时候可以使用whistle通过简单的配置来解决以上两个问题（目前还不能通过页面js获取页面的调试信息，暂时不支持debug功能，可以通过替换为console.log)：使用whistle查看页面的js错误，通过console输出debug日志。Log平台只需要配置简单的white规则就可以自动抓取页面错误和控制台输出信息。以https://m.baidu.com/为例，因为https://m.baidu.com/使用的是https访问，所以先开启whistle上的https拦截，然后就可以抓取和修改https请求了。手机需要配置whistle代理。一切准备就绪后，可以配置如下规则：m.baidu.comlog://#如果你想同时注入js脚本，可以使用以下方法之一#加载本地js文件上mac或linux/User/xxx/test.js#m.baidu.comlog:///User/xxx/test.js#在windows上加载本地js文件D:\xxx\test.js#m.baidu.comlog://D:\xxx\test.js#直接从whistle#m.baidu的Values配置的key-value获取脚本。comlog://{test.js}其中whistle的Values可以在：https://avwo.github.io/whistle/webui/values.html我们使用whistle的Values来在日志中注入一段js，主要用于通过console.error、console.warn、console.log等输出数据，并模拟抛出异常：m.baidu.comlog://{test.js}test.js:console.error({error:true});console.warn({error:true,warn:{test:true}});console.log(123456);//模拟抛出异常console.notAFunction('test');效果如下：使用whistle查看和修改页面的DOM结构和样式。Whistle集成了weinre的功能，只需要在PC端通过weinre配置一条规则修改网页的DOM结构和样式：m.baidu.comweinre://test其中，weinre中的test`://test只是作为weinre的分类，防止一个weinre调试页面连接过多，效果如下：使用whistle注入vConsolevConsole是一个轻量级、可扩展、前端开发调试面板，用于微信团队开发的手机网页。主要原理是通过在页面中注入js来模拟PC浏览器的控制台功能，这里使用whistle的js协议将vConsole.js注入到指定网页（https://m.baidu.com/），并配置white规则：m.baidu.comjs://{vConsole.js}效果如下图：注意：vConsole和weinre不能同时使用。Whistle的应用场景很多，后面我们会逐步输出给大家。更多信息请访问whistle的Github：https://github.com/avwo/whistle，如有问题或建议欢迎提issue或PR
