工具 · 抓包：whistle - 资源讯享网

大家好，我是讯享网，很高兴认识大家。

whistle 的大致工作流程：

配置需要修改的 url 地址
编写 URI 协议，如 statusCode://
编写协议对应的参数，如 statusCode://404

可以看出 whistle 的操作都是通过文本配置去实现，比较符合程序员的思维。

whistle 可操作的资源的 request 、respond 的 header、 body，其中 header 里面的 query 、ua 、 cookie、status Code 等数据对前端来说非常熟悉，也都有相应的协议去操作这些数据。

另外， whistle 很多操作协议都是针对前端开发友好的，比如 html、 js 、css 等类型的请求的修改协议对于前端程序猿来说都非常亲切。

whistle安装启动

安装
需要安装node

 # 安装 npm install -g whistle # 如果有提示说明whistle安装成功 whisle -V # 帮助信息  w2 help w2 -h

讯享网

启动

讯享网w2 start # 不设置端口默认使用8899 w2 start -p 8899 # 重新开始 w2 restart # 停止 w2 stop # 调试方式 w2 run

work@workdeMacBook-Pro ~ % w2 start [i] whistle@2.8.0 started [i] 1. use your device to visit the following URL list, gets the IP of the URL you can access: http://127.0.0.1:8899/ http://10.1.101.187:8899/ http://10.254.0.110:8899/ Note: If all the above URLs are unable to access, check the firewall settings For help see https://github.com/avwo/whistle [i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899 [i] 3. use Chrome to visit http://local.whistlejs.com/ to get started

打开http://127.0.0.1:8899/，即可进入控制台界面
切换到network面板，这里就是查看http请求的地方
在这里插入图片描述
讯享网

注意：
如果页面打不开，则可能是whistle所在的电脑防火墙限制了远程访问whistle的端口，需要关闭防火墙或者设置白名单。

多终端代理

手机的 wifi 设置里，打开代理，连接本机 ip 和 8899 端口即可查看手机的网页请求
电脑其余程序的代理设置，也可通过本机 ip 和 8899 端口的形式使用 whistle 查看请求，比如微信 web 开发者工具

注意以上操作均需要在同一个局域网内

PC终端配置

浏览器代理

Chrome ：
whistle for Chrome
SwitchyOmega
在这里插入图片描述

以上2款chorme插件二选一

全局代理

Windows全局代理
Windows: 菜单 > 设置 > 网络和Internet > 代理
在这里插入图片描述

Mac全局代理
Mac: 系统偏好设置 > 网络 > 高级 > 代理 > 网页代理(HTTP) 和安全网页代理(HTTPS)
在这里插入图片描述

手机终端配置

手机端要配置代理的话，需要保证所连wifi和启动了代理的主机处在同一网络。（可以通过电脑开热点）

【Wi-Fi连接】-【代理-手动】-【配置服务器（本机IP地址）&端口（8899）】
在这里插入图片描述
安装证书
点击抓包网页上方的HTTPS生成一个二维码，扫码安装到手机上

注意：
必须要配置代理后，才能扫码下载，否则会提示你网页无法访问哦。
在这里插入图片描述

安装好后需要开启https拦截
在这里插入图片描述

下面我们只要在我们自己开发的手机应用中进行操作，http请求就可以被whistle界面捕获啦

注意：
1、配置代理会影响浏览器浏览网页的功能，如果你有应用需要下载需要提前下载并打开
2、使用完毕后记得把代理改回来，不然会上不了网的！
3、上面的配置完成之后，如果https的请求还是不能正常访问或者还是出现安全提醒，可以重新打开浏览器访问或者重启下whistle。whistle官网给出的解释是如果之前访问过该页面，导致长链接已建立，所以我们之后的配置是不生效的。

使用whistle

Rules

点击create就可以在规则集合里面书写规则了。在这里插入图片描述

log

讯享网https://m.jd.com/ log:// # 只要是访问 https://m.jd.com/ 匹配方式下的页面，都可以在whistle的log选项下看到控制台输出的信息：

在这里插入图片描述
参考：
log

vConsole： values + js

就是通过whsitle的js规则，在响应中追加脚本，如果响应是html文档，则自动用包装后插入。

vConsole.js CDN地址：

https://unpkg.com/vconsole/dist/vconsole.min.js

在 values 功能栏下新建一个 vConsole.js , 并把 vconsole 的源码放进去，源码最后写一个初始化 vconsole 对象

讯享网var vConsole = new VConsole();

再在 rules 下配置：

http://www.baidu.com js://{ 
   vConsole.js}

刷新页面可以看到控制台的信息了
在这里插入图片描述

就我个人而言，我比较习惯使用注入vConsle的方式，因为可以同时使用多台设备，输出的内容互不影响，而且使用vConsole可以查看localStorage和sessionStorage等缓存信息。

Weinre

讯享网 # xxx为对应的weinre id，主要用于页面分类，默认为anonymous http://www.baidu.com weinre://xxx # 此时可以使用 weinre 查看页面，点击 http://local.whistlejs.com/weinre/client/#debug_mypage 或界面主菜单 “Weinre” 可打开 inspect 界面调试该页面

在这里插入图片描述

Filter

设置过滤器，忽略特性的请求内容，只看你想看的域名请求

# 忽略包含域名下的请求并不在network中显示 /.com/ filter://rule|hide # 忽略匹配包含spa-monitor.min.js，但在network中显示，相当于文件白名单 /spa\-monitor\.min\.js/i filter://rule

file

讯享网https://xxx.xxx.com/app.html file:///home/oracle/init.html

打开的页面会被替换为文本中的内容。

Host

绑定host映射和特定子路径的host映射：使域名解析到指定IP

转发协议+域名转发，轻松本地模拟 https ，访问线上的 https 域名实际上指向的是本地的 http 调试地址。

由于 whistle 兼容操作系统的 host 语法格式，所以在浏览器层面的 host 配置可轻松代替本地的 host 文件。这样做的主要好处是无缓存，切换时生效更快。如果找不到浏览器的再去查找本机的host文件

使用此方法也可以方便的更换域名host。有一个技巧就是在 “Rules” 界面下，可配多套 host 配置，比如 dev、gamma 等满足开发需求。

注意，涉及到 https 的请求都需要您的电脑和手机等都安装 whistle 提供的证书，详情可看文档。

配Host

# 在浏览器中访问xxx.xxx.com即可自动转发到本地服务中 10.125.36.59 xxx.xxx.com # 直接的host配置 # 一个IP对应多个域名 127.0.0.1:8086 ke..com www..com # 对全部域名路径替换host 10.125.36.59 ke..com/ads # 对特定的路径替换host

代理域名
将指定域名请求转发到另一个域名

比如预发环境接口域名为xxx-api.m.jd.com，线上域名是api.m.jd.com，如果遇到预发环境在发布或者预发环境有问题，而我们在做的任务只涉及到前端的改动，这时候我们可以使用whistle暂时将域名的接口先代理为线上，预发好了再关掉代理就行了。这样子我们就可以不必在我们代码上来回做更改，也不必频繁启动项目了。

讯享网 # 请求www..com的时候会返回ke..com的页面内容 www..com ke..com # 指定域名转发生效 ..com ke..com # 所有.com子域名转发生效

代理端口
比如我启动的项目端口是3000，我用80又不想重启项目（懒的有点过分哈），可以这样代理：

dev.jd.com dev.jd.com:3000

这样子即使启动的是3000，我们依然可以使用dev.jd.com。

代理https
有时候因为HSTS，请求被转成https，或者某些app只能打开https的请求。这时候可以使用whislte将https请求代理成http：

讯享网https://dev.jd.com http://dev.jd.com

这样子即使是用https访问，页面也可以正常打开。

urlParams

修改请求参数

www.ifeng.com urlParams://(test=1)

本地文件或文件路径替换

协议头可以加也可以不加，不加表示匹配所有协议，否则只对某个协议生效。类似willow的路径替换。

讯享网ctc.i.gtimg.cn/qzone/biz/gdt/atlas/mod/message.html  C:\Users\ouvenzhang\Desktop\edit.html # 单个文件的本地替换 ctc.i.gtimg.cn/qzone/biz/ C:\Users\ouvenzhang\Desktop\biz\build\ # 文件路径的替换，一般用这条就可以了 http://ctc.i.gtimg.cn/qzone/biz/ C:\Users\ouvenzhang\Desktop\biz\build\ #只针对http请求的文件路径替换

脚本注入

可以将一段脚本（可以使html、js、CSS片段）注入到dom页面中进行调试

ke..com html://E:\xx\test\test.html

 # 往 html 插入脚本 # 会在网页最后以 script 标签的形式插入，花括号的值是内置编辑器保存的文件，在主菜单 “Value” 下可找到 ke..com js://C:\Users\ouvenzhang\Desktop\gdt\console.js https://wq.jd.com js://{ 
   test.js} https://wq.jd.com js:///Users/myname/test/test.js # 往 html 插入样式 # 在网页里以 style 标签的形式插入 https://wq.jd.com css://{ 
   test.css} ke..com css://E:\xx\test\test.css

匹配模式

可以根据正则式匹配路径

讯享网#/keyword/i #关键字匹配 /ke\.\.com\/atlas\/(\d+)\/order\/edit/i C:\Users\ouvenzhang\Desktop\gdt\edit.html  # 正则匹配 ke..com/atlas/25610/order/edit C:\Users\ouvenzhang\Desktop\gdt\edit.html    # 直接匹配

修改返回码

说明：使 http 返回 404

https://m.baidu.com statusCode://404

文本类请求

append 内容、替换返回内容

讯享网// 会把内容 append 到请求后面 http://mydomain.com/style.css resAppend://{ 
   myAppend.css} // 完全替换请求内容 http://mydomain.com/style.css resBody://{ 
   myResBody.css}

vase：mock 数据

whistle 提供了一个强大的 mock 数据的插件，强大之处是可以结合 js 语句 + mock 语法去生成数据。举一个简单的例子说明用法：

先安装插件：

npm i -g whistle.vase

在 “Plugins” 菜单打开 vase 的界面，新建一个名字为 “mock_json_demo” 的配置，并选择模板为 mock 。输入如下内容：

讯享网{ 
    "list|5": [{ 
    "name": "@string", "avatar": " http://lorempixel.com/100/100/" , "id|+1": 10000 }] }

不熟悉 mock 语法的朋友可以到这里了解一下

在 “Rules” 下配置一条 vase 的规则：

http://mock.local/data.json vase://mock_json_demo

打开测试地址 http://mock.local/data.json ，即可看到模拟的数据。

请求改写与接口mock

讯享网ke..com ua://{ 
   test_ua} #注意这里的改写是whistle抓包请求的改写，浏览器调试看到的内容仍然是原来的 ke..com/ec/api.php?mod=utilities&act=estimate tpl://{ 
   mock-price}

test_ua和mock-price是values里面的设置，那么对应请求会直接返回values对应的内容，很方便：
在这里插入图片描述

mock & more

在现有的开发工作流里，在需求开发完毕进入测试后，需要测试人员模拟数据去测试页面功能。可以单独搞个 mock server（市面上已有类似服务比如 easy mock，mock server），whistle 只进行请求转发。

注意：
1、如果要禁用某个配置，可以使用Ctrl + /的快捷键，或者直接在前面加#
2、whistle入门比较简单，不过缺少一些功能，比如调试 websocket、图片等的能力，也缺少一些账户系统 & 共享配置的能力

参考：
Docs：whistle
安装证书
https代理

工具 · 抓包：whistle