抓包工具与移动端H5开发

之前一直做的是PC端的Web页面开发，很少触及移动端页面，最多也就是做一做响应式的适配，完全没有涉及过mobile-first页面的开发。站在初次涉及这个领域的立场上，我认为与普通的响应式页面相比主要的区别点有两点：

WebView环境不同，移动端页面的运行环境受到系统（iOS/Android）和App（各大App都有自己的WebView，特别是微信）的影响，各个WebView提供不同的能力，需要单独适配
因为WebView环境不同，因此也不能直接在PC端使用浏览器仿真直接调试，而是需要真机调试，这就需要使用一些特殊工具来让真机的App环境能连上开发页面（抓包劫持）

本文主要讨论后者，学习抓包和反向代理工具的实践和使用。

抓包工具概览

可以看到，抓包工具截获了所有网络请求包，并将这些Session展示了出来以供修改，我们可以通过设置规则来拦截和转发这些包，来达到开发和调试的目的。

相信各位前端的同学或多或少都使用过Node http-server的Proxy功能，它的功能主要就是反向代理，将某个URL的流量通过规则Rewrite后转发到另一个URL，一般用于解决前后端的HTTP请求跨域问题。

但其实在最开始的时候我还使用过另一套方案，就是上面说的抓包工具转发，它通过规则去匹配指定URL来转发，一样可以达到同样的效果。

因此，我们可以简单地理解这个抓包工具在调试过程中的作用就是全局的反向代理，拦截原来的请求，将一个URL的流量重写后转发给指定的URL。

上面我们已经大致了解了抓包工具的作用，那么它在移动端调试上有什么作用呢？

因为移动端Web开发依赖于Webview的特性，我们需要在真机环境里进行测试，那如何在真机环境的Webview中进入对应页面就是一个问题，很多时候我们都不能控制我们的内置浏览器的URL。

因此我们想出了一个办法：我们直接访问一个现存的URL，然后利用抓包工具反向代理到本地的开发页面不就可以实现调试了吗。

大概的流程如下图所示，抓包工具将自己设置成反向代理服务器，从手机→服务器的连接变成了手机→电脑（代理服务器）→服务器的过程。

所谓代理（Proxy）就是中间人，在计算机网络中就是一个端侧设备，它接收请求，并根据规则转发到对应的实际端侧目标，在整个访问过程中客户端并没有和服务端真正通信，而是通过代理这个中间人进行沟通。

代理又分为正向代理和反向代理两种：

正向代理：在客户端发送请求时不直接请求服务端，而是请求代理，通过代理间接请求服务端，这样就向服务端隐藏了真实的客户端，如通过VPN科学上网就属于正向代理。
反向代理：在服务端处理请求时先通过一个类似“中枢”的代理环节，对外请求都汇总到中枢，中枢再具体决定将请求转发到哪个物理机进行响应，向客户端隐藏了真实的服务端，如使用nginx负载均衡和在http-server中代理后端地址等过程都是反向代理。

抓包工具的代理显然是反向代理，但其在手机端的连接需要建立一个VPN，这个过程又属于正向代理。

下面列举一些常见的抓包工具：

whistle : 最负盛名的基于Node实现的跨平台web调试代理工具
- 主要用于查看、修改HTTP和HTTPS包
- 也可以作为HTTP代理服务器使用
  下面这个熟悉的界面就是whistle啦
Fiddler ：Windows平台为主的网络调试代理工具，后来也支持mac和Linux
Charles : mac平台的网络代理调试工具
Bifrost : 字节跳动出品的抓包代理工具，也是我正在使用的（虽然不确定外网能不能搜到hhh）
- Electron前端，全平台支持
- 简单易用的GUI

在官网下载安装PC/mac客户端Bifrost (bytedance.net) ，手机端同时安装。

点击顶部的手机图标，手机扫码连接（同一Wi-Fi下），后面会在手机端建立一个VPN连接，随后电脑端就可以收到手机端的请求包信息。

手机端可以设置应用白名单，避免全局代理产生问题