抓包、代理、请求拦截、手机端页面调试?通通拿下!

语言: CN / TW / HK

theme: channing-cyan highlight: nnfx-dark


我正在参加「掘金·启航计划」

前言

是否在开发过程中遇到以下痛点?
1、本地环境与线上环境差异造成一些缺陷只能在线上环境复现?
2、联调时每次切换环境总是要重启项目?
3、接口环境突然崩了,无法继续进行调试?
4、改完一个bug,需要打包部署才能进行验证?
5、手机上的样式与本地环境有差异,明明是相同的代码,调试却无从下手?
...
如果你正面临这些问题,那么借助一些工具就显得很有必要了
本文介绍抓包工具`LightProxy`的使用,利用这个工具足以解决以上所有痛点。

工具介绍&下载

介绍

LightProxy 是 IFE 团队开发的一款基于 Electron 和 whistle 的开源桌面代理软件,致力于让前端开发人员能够精确的掌握自己的开发环境,通过 HTTP 代理使用规则转发、修改每一个请求和响应的内容。

大部分人想必都对whistle有所耳闻。而LightProxy对它的封装,用一句话概括便是开箱即用。

下载地址

macOS Version Download

Windows Version Download

使用

准备工作

安装之后,为了能够捕获到Https请求,右手边的Whistie面板,点击上方的HTTPS进行证书安装,点击之后会弹出证书下载的页面

image.png

window默认是双击下载之后的证书进行安装(根据提示安装即可)。 不知道怎么安装的小伙伴可以参考这里http://wproxy.org/whistle/webui/https.html ;关于手机端的代理调试我们后面再说。

上面提到过,LightProxy开箱即用,安装完之后我们打开右下角的系统代理

image.png

这时候再去访问任意页面(例如:http://juejin.cn/ ),就可以看到对应抓包捕获到的一些相关请求

image.png

规则使用

这部分将介绍如何使用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}的形式。

image.png

这样子的话,我们就可以在规则中用利用大括号{}插入变量值

```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`界面看是否命中规则:

image.png

请求拦截

拦截修改请求响应内容 resBody

首先设置values值为json数据

image.png

```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})

内容较少可以直接使用括号(),较多的话推荐通过变量进行管理

``` 可以看到响应内容已被修改 image.png

拦截修改cookie reqCookies

```bash

修改请求cookie,key:value的格式,多个通过换行进行添加

http://www.test1.com:8080/api reqCookies://{cookie1} ``` 对应的cookie1

image.png

可以看到对应的cookie已经被设置上去

image.png

以上介绍了拦截请求的响应与cookie; ligntProxy能拦截的可不仅仅是这些,拦截请求头添加请求参数、甚至是添加Cors解决跨域问题等等都不在话下,你大可在whistle的文档中找到这一切。

接下来我们看看lightProxy在手机端的一些骚操作

手机端

证书安装

点击lightProxy的手机代理菜单

image.png

确保手机与电脑处于同一局域网(可通过电脑放出移动热点,手机进行连接)

第一步:wifi设置代理 这里以安卓手机为例,不同手机可能不完全一样,但大同小异。 长按连接的wifi,点击修改网络进入到如下页面。

image.png

设置完成点击保存即可

第二步:安装证书,下载之后点击证书对证书进行安装,不同机型可能有所区别,这一步需要验证手机屏幕密码/指纹。如果需要选择用途:选择VPN即可。

image.png

ios用户看这里 image.png

完成以上操作之后,就可以开启愉快的抓包之旅了~ 可用手机打开浏览器访问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的移动端页面提供了解决方案,再也不用担心生产环境有错无处排了。

image.png

远程调试

lightProxy提供了debugger功能,可用来调试页面元素或者查看页面元素等。只需要在访问的链接上加上lightproxy=true,如:http://www.test1.com:8080/lightProxy?lightproxy=true ,打开Debugger面板,如下所示

gif1.gif

这种调试方式在使用手机访问链接时也是有效的,你可以通过debugger打开的开发者工具聚焦到你手机上的dom元素,去做你想要做的事情,这更多的意义在于手机端的dom元素你也可以直接查看,仅仅只需要你的电脑和手机在同一局域。也因此帮助你快速定位与修复线上环境出现的一些问题。

除了以上debugger面板的方式,whistle本身还集成了weinre,不过需要在浏览器端打开。本质上lightproxy只是套了一个whistle,我们可以通过浏览器直接访问到whistle。只需要在浏览器中输入ip地址+端口号(可以在手机代理也即是证书下载的界面查看),即可访问到网页版的whistle,账号密码在右下角

image.png

启动weinre配置如下

```bash

可通过直接访问lightproxy ip地址+端口号打开网页版;test1为id,用于区分多个页面

http://www.test1.com:8080/lightProxy weinre://test1 ``` 可以看到weinre中多了一个test1,此时点击进行访问即可看到处于浏览中的页面,可以查看对应的dom元素等,最终效果与Debugger差不多。

gif2.gif

扩展

对于线上环境的调试,我们可以将线上环境的前端相关资源通过转发指向本地的前端资源,如此一来可以做到本地的前端代码直接在生产/测试的环境上运行查看效果。这对于本地的开发也是非常有利的。具体的配置方式小伙伴们可以尝试自己研究。有疑问欢迎随时沟通交流~

总结

以上,只是介绍了在开发过程中通过lightProxy来突破常规调试的一些操作,实际lightProxy上远不止这些内容,更为重要的是动手去尝试。笔者希望小伙伴们能够通过本篇文章来入门/熟悉一些代理工具调试的手段。更多功能详见 whistle