抓包、代理、请求拦截、手机端页面调试？通通拿下！
theme: channing-cyan highlight: nnfx-dark
我正在参加「掘金·启航计划」
前言
是否在开发过程中遇到以下痛点？
1、本地环境与线上环境差异造成一些缺陷只能在线上环境复现？
2、联调时每次切换环境总是要重启项目？
3、接口环境突然崩了，无法继续进行调试？
4、改完一个bug，需要打包部署才能进行验证？
5、手机上的样式与本地环境有差异，明明是相同的代码，调试却无从下手？
...
如果你正面临这些问题，那么借助一些工具就显得很有必要了
本文介绍抓包工具`LightProxy`的使用，利用这个工具足以解决以上所有痛点。
工具介绍&下载
介绍
LightProxy 是 IFE 团队开发的一款基于 Electron 和 whistle 的开源桌面代理软件，致力于让前端开发人员能够精确的掌握自己的开发环境，通过 HTTP 代理使用规则转发、修改每一个请求和响应的内容。
大部分人想必都对whistle有所耳闻。而LightProxy对它的封装，用一句话概括便是开箱即用。
下载地址
使用
准备工作
安装之后，为了能够捕获到Https请求，右手边的Whistie面板，点击上方的HTTPS进行证书安装，点击之后会弹出证书下载的页面
window默认是双击下载之后的证书进行安装（根据提示安装即可）。 不知道怎么安装的小伙伴可以参考这里http://wproxy.org/whistle/webui/https.html ；关于手机端的代理调试我们后面再说。
上面提到过，LightProxy开箱即用，安装完之后我们打开右下角的系统代理
这时候再去访问任意页面（例如：http://juejin.cn/ ），就可以看到对应抓包捕获到的一些相关请求
规则使用
这部分将介绍如何使用LightProxy做一些 “有趣” 的事情
host代理
```Bash
lightProxy支持以下几种host的配置方式
127.0.0.1 www.test1.com www.test1.com 127.0.0.1 127.0.0.1 www.test1.com www.test2.com ```
请求转发（场景：解决跨域问题，无感修改接口域名）
```Bash
请求转发
http://www.test1.com:8080/api http://www.test1.com:8081
http://www.test1.com:8080/api http://www.test1.com:8082
``
上面的例子将127.0.0.1的请求如：http://www.test1.com:8080/api/abc转发到http://www.test1.com:8081/abc这样子便解决了本地调试时直接请求www.text1.com:8081` 的跨域问题。
与此同时，如果我们对接的后端地址经常发生改变，那么只需要修改一下转发的地址，再保存即可，无需重启前端项目，做到无感切换。
这里提到了地址经常变化，因为我们可以通过变量的形式来控制，在lightProxy中提供了values的功能来添加我们的变量，你可以理解为键值对{key:value}的形式。
这样子的话，我们就可以在规则中用利用大括号{}插入变量值
```bash
baseUrl 指向values中的变量值：www.test1.com
等价于http://www.test1.com:8080/api www.test1.com:8081
http://www.test1.com:8080/api {baseUrl}:8081
``
如果不确定配置的规则是否生效，可以找到对应的请求查看Overview`界面看是否命中规则：
请求拦截
拦截修改请求响应内容
resBody
首先设置values值为json数据
```bash
重写响应体中的body为参数body1对应的value值 {"id":666}
http://www.test1.com:8080/api resBody://{body1}
也可以直接使用小括号(),里面直接放响应的内容:{"id":666}
http://www.test1.com:8080/api resBody://({"id":666})
内容较少可以直接使用括号(),较多的话推荐通过变量进行管理
```
可以看到响应内容已被修改
拦截修改cookie
reqCookies
```bash
修改请求cookie,key:value的格式，多个通过换行进行添加
http://www.test1.com:8080/api reqCookies://{cookie1} ``` 对应的cookie1
可以看到对应的cookie已经被设置上去
以上介绍了拦截请求的响应与cookie; ligntProxy能拦截的可不仅仅是这些，
拦截请求头、添加请求参数、甚至是添加Cors解决跨域问题等等都不在话下，你大可在whistle的文档中找到这一切。接下来我们看看
lightProxy在手机端的一些骚操作。
手机端
证书安装
点击lightProxy的手机代理菜单
确保手机与电脑处于同一局域网(可通过电脑放出移动热点，手机进行连接)
第一步：wifi设置代理
这里以安卓手机为例，不同手机可能不完全一样，但大同小异。
长按连接的wifi，点击修改网络进入到如下页面。
设置完成点击保存即可
第二步：安装证书，下载之后点击证书对证书进行安装，不同机型可能有所区别，这一步需要验证手机屏幕密码/指纹。如果需要选择用途：选择VPN即可。
ios用户看这里
完成以上操作之后，就可以开启愉快的抓包之旅了~ 可用手机打开浏览器访问www.baidu.com ，查看nextwork中是否能补抓到请求。
脚本注入
```bash
利用jsPrepend 可以在html页面中添加script标签进行js脚本注入
以下注入了values 中的变量 myJs.js
http://www.test1.com:8080/lightProxy jsPrepend://{myJs.js}
myJs.jsjs
const myScript = document && document.getElementById('myScript')
if(!myScript) {
const script = document.createElement('script'); // 创建一个script标签
script.type = 'text/javascript';
script.src = 'http://unpkg.com/vconsole/dist/vconsole.min.js';
script.id="myScript"
document.getElementsByTagName('head')[0].appendChild(script);
window.onload = function(){
var vConsole = new window.VConsole();
}
}VC
```
以上代码的效果如下图所示，页面中注入了
VConsole，这对于一些生产环境不具备VConsole的移动端页面提供了解决方案，再也不用担心生产环境有错无处排了。
远程调试
lightProxy提供了debugger功能，可用来调试页面元素或者查看页面元素等。只需要在访问的链接上加上lightproxy=true，如：http://www.test1.com:8080/lightProxy?lightproxy=true ，打开Debugger面板，如下所示
这种调试方式在使用手机访问链接时也是有效的，你可以通过debugger打开的开发者工具聚焦到你手机上的dom元素，去做你想要做的事情，这更多的意义在于手机端的dom元素你也可以直接查看，仅仅只需要你的电脑和手机在同一局域。也因此帮助你快速定位与修复线上环境出现的一些问题。
除了以上debugger面板的方式，whistle本身还集成了weinre，不过需要在浏览器端打开。本质上lightproxy只是套了一个whistle，我们可以通过浏览器直接访问到whistle。只需要在浏览器中输入ip地址+端口号(可以在手机代理也即是证书下载的界面查看)，即可访问到网页版的whistle，账号密码在右下角
启动weinre配置如下
```bash
可通过直接访问lightproxy ip地址+端口号打开网页版；test1为id，用于区分多个页面
http://www.test1.com:8080/lightProxy weinre://test1 ``` 可以看到weinre中多了一个test1，此时点击进行访问即可看到处于浏览中的页面，可以查看对应的dom元素等，最终效果与Debugger差不多。
扩展
对于线上环境的调试，我们可以将线上环境的前端相关资源通过转发指向本地的前端资源，如此一来可以做到本地的前端代码直接在生产/测试的环境上运行查看效果。这对于本地的开发也是非常有利的。具体的配置方式小伙伴们可以尝试自己研究。有疑问欢迎随时沟通交流~
总结
以上，只是介绍了在开发过程中通过lightProxy来突破常规调试的一些操作，实际lightProxy上远不止这些内容，更为重要的是动手去尝试。笔者希望小伙伴们能够通过本篇文章来入门/熟悉一些代理工具调试的手段。更多功能详见 whistle。