利用whistle调试移动端页面

whistle是基于Node实现的跨平台web调试代理工具，能够做为普通的http代理或者用来抓包、修改、操做http、https、websocket、tunnel请求，如：修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等，基本上能够操做web请求的方方面面，并且支持插件扩展功能，本文主要讲下如何用whistle调试移动端页面，安装及使用whistle等其它内容请参见Github：github.com/avwo/whistl…。

移动端调试遇到的问题

相较于PC侧，在移动端调试网页，主要会遇到如下三个问题：

1. 没有Console，没法查看页面的js错误及经过 console.xxx 输出的调试日志
2. 没法查看、修改页面的DOM结构及样式
3. 没法debug

通常状况下，移动端页面在PC的Chrome浏览器上模拟器上进行调试，但并不是全部移动端页面均可以在PC的模拟器上调试，好比一些须要调用到APP的本地API的APP内嵌页面，或者测试页面兼容性问题等，只有在真机上运行才能看到真实效果，这个时候能够利用whistle，经过简单配置便可解决上述的前两个问题(目前没法经过页面js获取页面的调试信息，暂不支持debug功能，能够经过 console.log 来代替)：

利用whistle查看页面的js错误及经过 console.xxx 输出的调试日志

whistle内部实现了相似浏览器的Console的远程Log平台，只需配置简单的whistle规则便可自动捕获页面的错误及console输出的信息，以m.baidu.com/为例，因为 https://m.baidu.com/ 是用https访问，先在whistle上开启https拦截，才能对https请求进行抓包及修改，手机须要配置下whistle代理，一切准备就绪后，能够配置以下规则：

m.baidu.com log://
# 若是你想同时注入js脚本，能够用下面一种方式
# 在mac或linux加载本地js文件/User/xxx/test.js
# m.baidu.com log:///User/xxx/test.js
# 在windows上加载本地js文件D:\xxx\test.js
# m.baidu.com log://D:\xxx\test.js
# 直接从whistle的Values配置的key-value里面获取脚本
# m.baidu.com log://{test.js}
复制代码

其中，whistle的Values参见：avwo.github.io/whistle/web…，匹配方式也不只局限于域名匹配，还包含路径、正则、通配符、精确匹配等多种匹配模式，具体参见帮助文档。

咱们用whistle的Values在log里面注入一个段js，主要用来经过console.error, console.warn, console.log等输出数据，并模拟一个异常抛出：

m.baidu.com log://{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.com weinre://test
复制代码

其中，weinre://test 中的 test 只是做为weinre的分类，防止一个weinre调试页面出现太多的链接，效果以下图：

利用whistle注入vConsole

vConsole是微信团队开发的轻量、可拓展、针对手机网页的前端开发者调试面板，主要原理是经过在页面注入js实现模拟PC浏览器的Console功能，这边利用whistle的js协议往指定网页(m.baidu.com/)注入vConsole.js，配置whistle规则：

m.baidu.com js://{vConsole.js}
复制代码

效果以下图：

注意： vConsole和weinre不能同时使用

whistle还有不少应用场景，后续再逐步输出给你们，了解更多内容请访问whistle的Github：github.com/avwo/whistl…，有问题或建议欢迎你们提issue或PR。