手把手教你使用前端的调试神器–whistle

阿里云-轻量应用服务器

whistle 是一款很棒的前端调试代理工具,可以用来对前端和移动 H5 http, https 的抓包。

在 windows 上直接可以替代对 hosts 文件的 ip 和域名的映射,当然功能远远不止于此。  

01 简介

whistle 是基于Node实现的跨平台抓包调试代理工具,有以下基本功能:

查看 HTTP、HTTPS 请求响应内容

查看 WebSocket、Socket 收发的帧数据

设置请求 hosts、上游 http/socks 代理

修改请求 url、方法、头部、内容

修改响应状态码、头部、内容,并支持本地替换

修改 WebSocket 或 Socket 收发的帧数据

内置调试移动端页面的 weinre 和 log

作为 HTTP 代理或反向代理

支持用 Node 编写插件扩展功能

02 如何安装

Mac 上 

sudo cnpm i whistle -g -S 

启动 whistle 

w2 start 

可以在控制台看到

http://127.0.0.1:8899/

这里非常推荐用 chrome 扩展程序 SwitchOmega 来控制 chrome 浏览器的代理配置,

如何安装 chrome 扩展以及离线安装扩展可以看我的另一篇文章。 

安装Chrome代理插件:推荐安装 SwitchyOmega

在 SwitchOmega 配置好 whistile 代理之后,浏览器输入 http://local.whistlejs.com/ 

可以新建代理规则,

ip  域名    或者    域名  ip 

我们在 chrome 中启用 whistle 代理之后,访问 https://www.baidu.com, 可以看到百度的每一个请求都可以在 whistle 上看到。 

但是由于是 https 加密,所以传输内容我们看不到。下面跟大家说明如何安装 whistle https 证书。 

03 安装 whistle 证书 

访问一个 https 站点,https://www.baidu.com, 如下图,点一个 https 请求并点上面的 https 按钮会弹出一个二维码,点下载证书下载后打开钥匙串。 

添加后点箭头的证书会筛选出 whistle 证书,点开证书选择始终信任该证书。

这样就可以抓 https 的包了。 

如上图可以看到百度的请求的返回内容。 

这个方式在移动端抓包的时候特别有用,在没有 chrome dev tools 的时候。 

后续会有文章说明如何在移动 H5 上抓包调试。