When we developed the website project, we can debug mode browser view request and response data, then if we do not develop the mobile side project page it? How to grab the data it?
A few days ago had to make a server Young told me that he does not capture tool, a problem directly debug the code, then I asked him if online services, then how do you adjust? In a real project, not encountered with the client wrangling with each other thing? I think that is normal ah, said he did not question the client, the server also said he had no problem, in the end who has the problem? At this time no need to evade each other, take the data to speak out is crucial. Packet capture tool to do what? It requests the client's data, and the data returned from the server intact crawl down for siege lion analysis of the problem. So, the first analysis of the problem is the most important, rather than one up on the tracking code debug.
Charles
Is an HTTP proxy, HTTP monitor, a reverse proxy, when the agent to access the Internet connection Charles, Charles can monitor this procedure all data sent and received. It allows a developer to view all HTTP traffic connection to the Internet, these include request,
response and HTTP headers (containing cookies and caching information).
Charles Main features:
1. Support SSL proxy. Analysis SSL request may be intercepted.
2. support flow control. And you can simulate slow network latency (Latency) longer request.
3. Support AJAX debugging. Can automatically json or xml data format for easy viewing.
4. Support AMF debugging. You can Flash Remoting or Flex Remoting information formatted for easy viewing.
The network supports a retransmission request, the rear end to facilitate debugging.
6. Support network modification request parameters.
7. intercepted support network requests and dynamically modified.
8. Check HTML, CSS and RSS content meets the W3C standards.
Charles installation:
The appropriate operating system to download the official website of Charles (http://www.charlesproxy.com) the latest version of Charles installation package can be installed.
Charles is a billing software, free trial for 30 days. After the trial period, non-paying users can continue to use, but each time not more than 30 minutes, and there will be a delay of 10 seconds at startup.
Therefore, the payment scheme for the majority of users is still quite friendly, even if you do not pay for long-term, also can use the full software functionality. Just when you need a long time to debug the packet will be forced to close because Charles encountered impact. (Secretly tell you, the public No. reply "Charles" get cracked version download link)
Charles is powerful, we are here only a few commonly used and very useful feature:
1. System Agent Charles provided
2, taken on mobile network request packet
2.1 Manual repeat request (Repeat, Advanced Repeat)
2.2 Simulation manual request (Compose)
2.3 modify network request content (Compose)
3. Filter network requests
4. Forwarding Agent
The capture support https request (if configured or catch, solutions below)
Charles offers two viewing packet view, respectively called "Structure" and "Sequence".
1. Structure view the request classified according to the network domain access.
2. Sequence view sorted by network access request time.
These will be introduced one by one how to configure and use
A. The Charles is set to System Agent
Charles is provided by itself as a proxy server to complete the capture of the check system agent, a request issued to the local system can be taken down. If only APP grab bag, it can turn off this configuration, this will not be looked at too much data was chaotic.
Mac
Windows:
Note that, Chrome and Firefox browser does not use the system default proxy settings, and Charles
Is by setting itself as a proxy server to complete the packet interception, it can not be intercepted by default Chrome and Firefox
Network communication content browser. If you need to intercept, then set to use system proxy settings in Chrome, or directly to the proxy server settings
127.0.0.1:8888 也可达到相同效果。
二. 截取移动设备上的网络请求包
我们在调试移动APP时，需要抓取APP发送的数据包，首先进行设置，Proxy -> Proxy Settings默认端口是8888，根据实际情况可修改。
查看本机IP地址：Help -> Local IP Addresses
然后配置手机代理：
IOS和Android配置差不多
打开要调试的APP，请求就会先发送到Charles，然后验证是否允许访问。
当点击允许后，可以在Proxy -> Access Control Settings里看到可以访问此代理服务器列表
注意
如果不小心点击了拒绝，可以手动添加手机IP/Mac地址到允许访问列表，或者重启Charles，手机再次访问，会再次提示选择。
如果不想每换一个手机都要进行验证，可以配置允许所有手机访问，加入
0.0.0.0/0（IPv4）或::/0（IPv6）
现在就可以抓包了，拿一款我们公司开发的乐视车联APP来做测试：
三. 过滤网络请求
通常情况下，网络请求是非常大量的，从几十个请求里找到我们需要的观察的某个请求比较费时，那么我们就需要对网络请求进行过滤，只监控向指定目录服务器上发送的请求。有两种方法：
1. 在Sequence界面的中部的Filter栏中填入需要过滤出来的关键字。例如我们的服务器的地址是：*.leautolink.com，那么只需要在Filter栏中填入leautolink即可。（一般用于临时过滤）
2. 在Charles的菜单栏选择"Proxy"->"Recording Settings"，然后选择Include栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了。如下图所示：（固定过滤地址）
四. 代理转发
实际开发时，有这样的场景，服务端线上版本有bug，你在本地修改程序后，需要模拟实际的线上环境，来验证程序的正确性，最笨的方法就是让客户端修改一下APP的调用地址到你本机，然后重新打一个版本供你模拟测试，这样虽然可以，但每次遇到bug都要这么做的话，那效率极其低下，然而Charles为我们解决了这个问题。
请求转发，把调用方调用的地址转发到你本机地址的程序进行执行。
右键 -> Map Remote ...
并且配置Tools -> Map Romote
运行APP
五. Https请求抓包
默认我们是看不到https的请求数据的。我们需要安装证书。
Mac:
双击打开Charles Proxy CA
手机配置完代理（必须的操作）后，浏览器打开http://chls.pro/ssl
然后配置Proxy -> SSL Proxying Settings... 添加要抓取的https请求
然后再次请求：
如果不再使用Charles，想删除手机里的证书文件怎么删除呢？
设置->通用->描述文件与设备管理，删除指定的证书即可
Windows:
下一步
然后继续下一步直到导入成功。
剩下的配置与Max下配置相同
SSL的问题：
最近iPhone系统更新到ios
10.3后,用Charles抓包竟然出现了一些问题,https的请求都会失败,提示错误信息为Failure SSLHandshake:
Received fatal alert: unknown_ca 和You may need to configure your browser
or application to trust the Charles Root Certificate.
然而之前任何问题都没有,并且相关设置都正确:电脑上安装了Charles的根证书,并且设置了始终信任,然后手机上也登录了http://chls.pro/ssl安装了描述文件,一切都按正常程序走的,但是错误始终无法解决.
原因：
虽然charles的根证书已经在安装列表中显示,但它是被关闭的。在iOS
10.3之前,当你将安装一个自定义证书,iOS会默认信任,不需要进一步的设置。而iOS
10.3之后,安装新的自定义证书默认是不受信任的。如果要信任已安装的自定义证书,需要手动打开开关以信任证书。
解决：
设置->通用->关于本机->证书信任设置-> 找到charles proxy custom root certificate然后信任该证书即可.
Windows系统无法上网的问题
在windows下，如果Charles没有正常关闭，或者系统重启后无法上网的问题，因为Charles做了系统代理，当上网的时候，首先先访问代理服务器，然后代理再去链接网络，这时候Charles是非正常关闭的，只要重新打开Charles即可上网正常，正常关闭Charles后同样没问题。
写给测试人员的
另外抓包工具不只是开发人员独享的，任何一个参与项目的人都可以使用，测试工程师，运维，产品经理等等任何对技术感兴趣的人，尤其是测试工程师，在测试的过程中遇到问题，不是简单的bug记录员，而要做到问题的分析员，这才是真正的“工程师”，当bug真正的到开发这的时候，他拿到的是不仅仅是bug，包含了分析过程，分析的数据，甚至是解决方案。我觉得这才是标准工作方式。
其他学习资料：https://www.cnblogs.com/ymfdcome/p/6847315.html
Author: MR_LiY
link: https: //www.jianshu.com/p/d0a5e6986445
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.