whistle抓包代理

2023-05-03 本文已影响0人丹丹无敌

一、什么是whistle

whistle是基于Node实现的跨平台web调试代理工具，
主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用
whistle用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现
可以通过 Node 模块扩展功能

二、whistle在开发中常用的场景

绑定host
mock数据，替换请求
代理线上\预发资源，调试解决问题
解决跨域
移动端调试
等...

三、whistle的安装及使用

安装node ( v0.10.0以上版本 )

安装whistle

npm install -g whistle //mac sudo npm install -g whistle`

启动whistle
```
w2 start
```
启动后会展示访问的url列表，如下图所示

启动完成后在chorme按照提示访问对应的地址，如果浏览器可以打开如下页面即启动成功。

配置代理
分为全局代理、浏览器代理和移动端代理。日常工作常用的是chrome 浏览器代理以及移动端代理。

浏览器代理：

安装 SwitchyOmega，然后按如下步骤配置：

配置后可以通过插件开启\关闭代理

移动端代理：
(警告) 注意：手机要和当前电脑为同一局域网(wifi)内。以 IOS 为例（安卓同理）

安装证书
如果不安装根证书的话，不能抓 HTTPS 的包，访问浏览器会出现如下提示

mac电脑安装证书：
*

*
手机安装证书：
可以在浏览器中地址栏输入 rootca.pro，按提示安装证书
或者通过 whistle 控制台的二维码扫码安装
ios 10.3 之后需要手动信任自定义根证书，设置路径：设置 > 通用 >证书信任设置

四、页面简介

五、基本用法

绑定host

whistle 不仅支持传统的 Host配置，还支持子路径和端口的 Host 转发配置，我们可以将我们的环境放在不同的规则中，随时切换，而且无缓存，切换时候生效更快
mock数据
a) 可以复制后端接口返回的数据，在whistle中保存

(警告)
注意:value中可以直接设置名称后缀为.json，设置后该value值会转为json格式

b) 通过配置规则resBody指定内容替换响应内容，在请求指定接口时，代理到本地mock的数据
当访问到beta-color.jd.id/jdid_pc_website/signIn_banner/1.0接口时，返回的值即为whistle中设置的signIn的值，我们可以随意修改返回值的状态码、字段等，以满足开发需求
```
beta-color.jd.id/jdid_pc_website/signIn_banner/1.0 resBody://{signIn}
```

代理线上\预发资源，调试解决问题
可以把线上访问的资源代理到本地资源，快速验证，无须部署代码验证

36.110.180.148 i.3.cn 
111.13.29.170 m.jd.id
i.3.cn/m/v2/index/3.4.47/js/index.js   file:///Users/wanghanying1/Desktop/首页相关项目/eptid-m-index/dist/3.4.47/js/index.js resCors://* 
i.3.cn/m/v2/index/3.4.47/js/chunk-vendors.js  file:///Users/wanghanying1/Desktop/首页相关项目/eptid-m-index/dist/3.4.47/js/chunk-vendors.js resCors://* 
i.3.cn/m/v2/index/3.4.47/css/index.css  file:///Users/wanghanying1/Desktop/首页相关项目/eptid-m-index/dist/3.4.47/css/index.css resCors://*

解决跨域问题

配置接口相应头的access-control-allow-origin: *

// value 中增加 resCors.json,内容如下：
origin: * 
// rules 中配置修改响应的cors 
m.jd.com/ resCors://{resCors.json}

修改cookie

利用reqCookies 和 resCookies。修改请求头的 Cookie 和修改响应头的 Set-Cookie

//value中新增cookie设置的.json文件，内容如下： 
test:123  
// 修改请求头的 `Cookie` 
m.jd.id reqCookies://{reqcookies.json} 
// 修改响应头的 `Set-Cookie` 
m.jd.id resCookies://{resCookies.json}`

移动端调试

相比于在 PC 端，在移动端调试网页，主要会遇到以下两个问题：
- 没有 Console，无法查看页面的 js 错误及通过 console.xxx 输出的调试日志
- 无法查看、修改页面的 DOM 结构及样式
移动端页面，虽然可以在 Chrome 的模拟器中进行调试，旦有些问题无法在pc端很好的复现。 APP 中内嵌页，在不同的机器中会遇到兼容性问题，需要在真机中才能看到效果或者复现问题，这个时候就需要 whistle 来帮助调试

移动端捕获页面错误和 log
```
m.jd.id log://
```
在 Network —>Tools 下面就可以看到报错等日志了

- 查看移动端页面的 DOM 样式
```
// test印尼 用来作为标示区别不同的页面 
https://m.jd.id/ weinre://test印尼     
https://m.jd.com/ weinre://test主站`
```
注入vconsole
```
npm i -g whistle.inspect
```
安装成功后，可以在 Plugins 页面中看到安装的插件：

移动端页面会出现浮动按钮，点击即可查看页面错误和log；

Tips： 了解更多可查阅whistle官网 http://wproxy.org/whistle/webui/values.html

whistle抓包代理

猜你喜欢

热点阅读