前言

本文内容主要针对手机端网络抓包，方便开发者查看网络接口情况。

一、抓包及作用

作为大前端的开发人员，我们常说的抓包其实大多数情况指的都是通过工具获取我们代码运行时请求的接口情况。

通过抓包，我们能够获取接口请求前、请求中以及请求后不同状态下的一个详细信息，这对我们分析程序、处理bug等有着巨大的帮助。说俗一点，如果确认了是接口的问题，我们拿着接口的具体情况去找后端人员，battle也更容易。

上面说完什么是抓包以及抓包的常规作用，这里简单介绍一下自己用过的一些抓包工具吧~

为了方便大家选择适合自己的工具，这里针对上述工具的区别作一个简单的介绍：

工具	优势	劣势	下载地址	其他
WhireShark	从链路层获取数据，便于深层次的分析	1、上手难，需要一定的网络基础2、无法分析https的数据	www.wireshark.org/download.ht…
Charles	1、跨平台，不仅支持 Windows 系统，还支持 MacOS，以及 Linux 操作系统 2、配置使用简单，https也能轻松抓取	付费软件，不激活单次使用时长30分钟	www.charlesproxy.com/download/	不想付费可以私我
Fiddler	开源免费	仅仅支持window平台	www.telerik.com/download/fi…
AppInspection	这是Android Studio官方提供工具，使用简单，无需额外安装。	只能Android使用	Androidstudio自带无法额外下载安装
Inspect	网页抓包常用，相当于浏览器上按下F12	只能抓取网页相关接口	浏览器自带也无需下载安装

关于上述工具个人常规使用Charles、AppInspection和InSpect三款，而后两款无需额外下载安装，就不做过多介绍，后文全部以Charles进行介绍~

在使用Charles对手机进行抓包时，需要先进行charles端口设置Proxy->Proxy Settings, 默认代理的端口是8888，也可以根据你的习惯改成其他的端口。

要想通过Charles抓包手机的数据，需要满足以下两个条件：

Android手机设置网络代理一般操作方式就是长按连接的wifi进行网络修改设置或者在网络详情中点击代理进行设置，需要注意的是因为我们有明确的ip地址和端口，所以需要选择静态手动代理。

手机代理设置都是相通的，设置操作依次是打开手机设置->点击无线局域网->点击连接好的Wifi进入详情->点击下方的配置代理->选择手动->输入服务器地址和端口即可。

以上配置都做好后，点击Charles软件界面左上角的红点可以开始或者停止抓包（启动软件后默认是开启的），同时可以辅助下方的Filter过滤器过滤出自己想要的接口地址，这一点在有明确的API地址的情况下作用非常大。

配置Charles抓包后有几个小的注意事项：