移动端调试终极利器whistle

发表于 | 分类于 | 阅读次数:

whistle是什么?

抓包工具？代理工具？调试工具？它都是。

whistle是基于Node实现的跨平台web调试代理工具，有以下基本功能：

  1. 查看HTTP、HTTPS请求响应内容
  2. 查看WebSocket、Socket收发的帧数据
  3. 设置请求hosts、上游http/socks代理
  4. 修改请求url、方法、头部、内容
  5. 修改响应状态码、头部、内容，并支持本地替换
  6. 修改WebSocket或Socket收发的帧数据
  7. 内置调试移动端页面的weinre和log
  8. 作为HTTP代理或反向代理
  9. 支持用Node编写插件扩展功能
    image

简单来说，

  • 它集成了weinre，可以远程调试查看dom结构（不知道weinre？一个可以在pc端查看dom结构端调试工具）
  • 可以替代charles做抓捕
  • 可以替代nginx的部分功能做代理
  • 可以帮助在任意页面中插入脚本（比如vconsole、eruda），很方便调试线上bug

有了whistle，移动端调试的问题迎刃而解

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

  1. 没有Console，无法查看页面的js错误及通过 console.xxx 输出的调试日志 （vconsole/eruda可以解决，需要在页面中插入脚本）
  2. 无法查看、修改页面的DOM结构及样式（weinre可以解决，需要在页面中插入脚本）
  3. 无法debug（charles可以解决）

而且调试线上问题，你也没办法说修改线上代码注入调试需要的工具吧？而且很耦合。
而利用whistle，无需在项目中插入脚本，即可解决上述问题；

下面的部分需要你先安装whistle，如果你没有安装，请先按照whistle引导安装启动

  1. 安装Node
  2. npm install -g whistle 安装whistle
  3. w2 start启动whistle
  4. 配置代理
  5. 安装根证书

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

注意： 如果调试https页面，先在whistle上开启https拦截

  • 在rules中配置m.baidu.com log://,control/command + s保存后即可在访问m.baidu.com时，在whistle右侧log面板看到m.baidu.com页面输出的日志。

  • 插入脚本
    如果你想同时注入js脚本，可以在rules配置：

    1
    2
    3
    4
    5
    6
    # 在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参见：https://avwo.github.io/whistle/webui/values.html
    image

利用whistle查看、修改页面的DOM结构及其样式

whistle集成了weinre的功能，同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式：

1
m.baidu.com weinre://test

test只是作为weinre的分类,从whistle顶部的weinre入口即可进入weinre，调试远程m.baidu.com页面
image

利用whistle注入vConsole

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

1
m.baidu.com js://{vConsole.js}

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

附录