一、简介
whistle 是一款基于 Node 的跨平台 web 调试代理工具。主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应,也可作为 HTTP 代理服务器使用。在调试移动端项目时,我们无法像在 Chrome 开发工具下那样看到请求、日志、DOM 结构等。当然,使用 vConsole 可以解决以上问题,不可否认 vConsole 能满足移动端调试的大多数场景,并且十分便利。但是 vConsole 必须要作为一款插件注入项目代码中,这就有了局限性。whistle 相比之下就没有限制。whistle 的功能十分强大,本文只介绍安装入门。
二、安装
安装 Node。(不再介绍)
安装 whistle。npm install -g whistle
启动 whistle w2 start
配置代理 推荐安装 Chrome 代理插件 SwitchyOmega。第一种安装方式是通过 FQ。第二种安装方式是安装谷歌访问助手,有了谷歌访问助手便可以在谷歌商店下载软件以及使用 google 搜索引擎。安装完成 SwitchyOmega 之后,配置代理。官网介绍非常详细。移动端调试时,移动设备要与 PC 在同一 WiFi 下,并且要给移动设备网络配置代理,代理服务器是 PC 的 IP 地址,端口号为 PC 上代理服务器配置的端口号
访问 配置页面 域名访问 http://local.whistlejs.com/,或者 IP+ 端口访 http://127.0.0.1:8899/
HTTPS 证书安装 首先是 windows 下安装根证书,然后移动设备 (以 ios 为例) 在代理网络环境下,Safari 地址栏输入 rootca.pro,安装完成之后需要手动信任根证书。设置 - 通用 - 关于本机 - 证书信任设置下设置信任根证书。在 配置页面 导航栏的 HTTPS 选项中,勾选 Capture HTTPS CONNECTs,即可抓取 HTTPS 请求。然后在移动设备访问页面时,即可在 配置页面 的 Network 中看到请求。
PS: 本文只是对安装入门做了粗略总结,对部分注意细节进行阐述。关于 whistle 更详细介绍、更多的功能请移步官网。