|
| 1 | +# 抓包&代理 |
| 2 | + |
| 3 | +> 为什么要抓包？当你在手机上打开H5页面，你不能像浏览器那样可以打开控制台 查看资源的的请求和响应信息，且不能对不能对数据进行修改；抓包工具有很多 Charles、whistle、Flidder 等，工作需要需要目前我常用的就2个，Charles(收费的)和whistle，简单介绍下2个工具特点 |
| 4 | +
|
| 5 | + |
| 6 | +### [Charles](https://www.charlesproxy.com/) |
| 7 | + |
| 8 | +##### 主要特征 |
| 9 | +- SSL 代理– 以纯文本形式查看 SSL 请求和响应 |
| 10 | +- 带宽限制以模拟较慢的 Internet 连接，包括延迟 |
| 11 | +- AJAX 调试——以树或文本形式查看 XML 和 JSON 请求和响应 |
| 12 | +- AMF – 以树的形式查看 Flash Remoting / Flex Remoting 消息的内容 |
| 13 | +- 重复请求以测试后端更改 |
| 14 | +- 编辑请求以测试不同的输入 |
| 15 | +- 拦截和编辑请求或响应的断点 |
| 16 | +- 使用 W3C 验证器验证记录的 HTML、CSS 和 RSS/atom 响应 |
| 17 | + |
| 18 | +> Charles 是收费的软件每30min会重启一次，对于经济条件有限的可以使用 [Charles 激活码计算器](https://www.zzzmode.com/mytools/charles/) 来解决临时需要Ps: 请支持正版 |
| 19 | +
|
| 20 | +### [whistle](https://github.com/avwo/whistle) |
| 21 | +> whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功 |
| 22 | +
|
| 23 | +#### 如何好用 |
| 24 | + |
| 25 | +```bash |
| 26 | +# Demo |
| 27 | +https://assets.alicdn.com/g/ae-fe/home-msite/0.0.48/index.js localhost:3000/index.js |
| 28 | + |
| 29 | +# 情景一 |
| 30 | +你要和后端联调一个接口，你在本地起的项目域名是 localhost:3000 但是请求的接口是m.aliexpress.com/get/countrylist.htm, |
| 31 | +你本地开发调用接口势必会遇到跨域的问题，难道每次改完代码发预发验证效果么？这样效率太低了， |
| 32 | +我们大部分的项目都是前后端分离的，所以我们直接用线上跑的页面，静态资源引用我们本地代码，一边调试一遍看效果岂不美哉， |
| 33 | +上面的demo2就做了这样的事情，因为所有的代理都走的是whistle，whistle命中我们配置的规则会把https://assets.alicdn.com/g/ae-fe/home-msite/0.0.48/index.js 的 |
| 34 | +响应体替换为 localhost:3000/index.js，它还会帮我们设置下响应头，no-store no-chche,解决我们改完代码立即生效问题 |
| 35 | +``` |
| 36 | + |
| 37 | + |
| 38 | +#### whistle还有一个GUI版本[lightproxy](https://github.com/alibaba/lightproxy) |
| 39 | + |
| 40 | +> LightProxy 是 IFE 团队开发的一款基于 Electron 和 whistle 的开源桌面代理软件，致力于让前端开发人员能够精确的掌握自己的开发环境，通过 HTTP 代理使用规则转发、修改每一个请求和响应的内容。 |
| 41 | +
|
| 42 | +> 个人偏向于web版的whistle 搭配 [Proxy SwitchyOmega](https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif) 可自由的切换 系统代理，网页代理、直连等模式 |
| 43 | +
|
| 44 | +##### 安装 |
| 45 | +```bash |
| 46 | +npm install -g whistle |
| 47 | + |
| 48 | +# 如果你网络不要可以指定镜像源安装 |
| 49 | +npm install whistle -g --registry=https://registry.npm.taobao.org |
| 50 | +``` |
| 51 | + |
| 52 | +##### 使用 |
| 53 | +```bash |
| 54 | +# 启动 whistle |
| 55 | +w2 start |
| 56 | + |
| 57 | +# whistle会在本地起一个web服务默认端口8899，打开web服务你会看到： |
| 58 | +network: 经过whistle代理的一些http/s等服务 |
| 59 | +rules: 你配置的规则 |
| 60 | +``` |
| 61 | +#### [更多使用方式详见官网](http://wproxy.org/whistle/install.html) |
0 commit comments