whistle抓包代理

一、什么是whistle

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

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

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

三、whistle的安装及使用

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

2. 安装whistle

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

3. 启动whistle

   w2 start
   

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

   

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

   
   

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

   浏览器代理：

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

   
   

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

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

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

   

   mac电脑安装证书：
   *

   
   *

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

   

四、页面简介

五、基本用法

1. 绑定host

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

2. 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}
   

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

   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://*
   

4. 解决跨域问题

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

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

5. 修改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}`
   

6. 移动端调试

   相比于在 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主站`
   

   

7. 注入vconsole

   npm i -g whistle.inspect
   

   安装成功后，可以在 Plugins 页面中看到安装的插件：

   

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

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