文章编号：1993 / 更新时间：2023-04-16 / 浏览：次

大家可能都听说过一个名词，“抓包”。比如软件开发前后端联调，调用后端接口无反应，这时我们常常会说：“抓个包看看前端传递的数据吧”。又或者我们的网站接入CDN之后，想要看一下网站静态资源的缓存时间和自己设置的缓存策略是否一致，也会用到抓包。那什么是抓包呢？

抓包经常被用来进行数据截取与观察，用于获取HTTP标头、内容、大小等信息来进行分析，对判断软件的Debug很大的帮助。所以，学会抓包，对于排查一些网络问题十分重要。

先来简单看下有哪些常见的抓包工具，主要有下面几种：

其中目前主流的抓包工具有：TcpDump、WireShark、Fiddler，下面我们对这几个抓包工具的性能进行一些简单的对比。

Android平台下的网络数据抓包工具，Android模拟器中自带TcpDump文件。

用TcpDump对网络数据抓包，手机不用走代理——将网络数据包添加到WireShark中分析即可。

PC端截获、分析通过该网卡的所有网络通信的数据包（针对移动端时候，就要对移动端设置代理服务器）强大的工具，完整查看网络中的每层、每个协议、每个数据包的详细组成信息；TCP、UDP、HTTP、HTTPS等协议的数据包均可获取；

HTTP协议的代理工具，抓取、分析电脑中所有进出该网卡、与网络进行数据交互的数据（针对移动端抓包时，需要设置代理服务器)，主要针对的是HTTP/HTTPS协议；能够清晰查看数据包中的内容——HTTPS中的数据包可以解密出来。

上文中可以看到主流的抓包工具都或多或少地存在缺点，那有没有一款界面简单、易操作，可以非常方便的查看网页中所有的网络请求，并审核检查单个资源的属性，比如HTTP标头、内容、大小等的抓包工具呢？

ChromeNetwork就可以做到。ChromeNetwork是属于ChromeDevTools套件中的一个调试工具，下面我来对它的使用做一个简单介绍。

注：本篇教程适用于使用Chromium内核的浏览器，MicrosoftEdge和Firefox也有类似的控制面板，在此不再赘述。

如何打开开发者工具面板

2.通过[更多工具]-[开发者工具]打开。

打开开发者工具后，切换到[Network面板]，面板的构成可查看下图：

接下来我们就来认识一下各个模块。

从左至右按钮的功能依次是：

我们简单的来体验一下其中几个功能的使用。

场景一：如何模拟在本地没有缓存的情况下访问网页？

我们可以打开控制器的[Disablecache]功能，重新刷新页面，浏览器会模拟不带缓存的请求访问，保证每一个请求都是向网络中发起的。

场景二：请求列表只记录当前页面的访问请求，如果点击了一个超链接，跳转到另一个网页，这样就会清空之前的记录。能否在点击链接跳转之后，依旧保存之前的请求记录呢？

我们可以打开控制器的[Preservelog]功能，这样在点击链接跳转到新的页面后，跳转前的请求记录依旧会保留，方便我们跟踪请求响应。

我们在访问一个网站的时候，可能会有几十个或者上百个请求，这些请求中有些是我们关心的，有些是我们不需要的，这个时候就可以快速的使用过滤器来筛选出我们关心的那些请求。

过滤器常见的过滤方式就是按类型过滤。

默认过滤中已经内置几种类型，比方说我们可以筛选出JS类的请求、图片类的请求或者是WebSocket类型的请求，按住[Ctrl(Windows)]或者[Command(Mac)]可以同时选择多个过滤类型。那么[HidedataURLs]选项是什么意思呢？

网站开发者很多时候会将一些小的图片或者CSS脚本，以BASE64格式嵌入到HTML中，以减少HTTP请求数。当勾选了HidedataURLs选项后，就可以隐藏掉请求列表中的像data:或者blob:类请求。

除了以上几个Chrome提供的过滤器以外，还可以非常灵活的在过滤框中使用过滤属性进行请求日志的筛选。

常见的过滤属性可参考下表。

场景一：打开又拍云官网的时候，我们想筛选网页中来自于不同域名的请求资源，就可以在过滤框中输入[domain:]，Chrome会帮我们自动补齐相关的域名信息。

场景二：打开的网页中，如何查看哪些请求使用了缓存？使用命令[is:from-cache]

请求列表默认是按照资源请求发起的时间升序排列的，我们也可以选择按指定列排序，例如[Waterfall]列上右键，按照活动时间来进行排序。

请求列表中默认每列的含义为：

我们也可以添加其它的一些列目录，在请求列上右键呼出菜单，可看到更多列选项。

此外我们也可以配置自定义列，在请求列上右键呼出菜单-ResponseHeaders-ManageHeaderColumns中添加想列出的响应头信息。

场景：如何自定义显示请求经过了CDN的哪些节点？

CDN会在每一个响应头中添加上Via响应头，那么我们就可以自定义请求列表显示Via列。

点击请求列表中的具体的请求，则可以打开请求内容详情，在内容详情中我们可以执行以下操作：

场景一：查看请求的响应与请求报文

场景三：将一个请求导出为cURL命令

在请求上右键呼出菜单，选择Copy选项。

以上就是对Chrome的Network面板的介绍，通过一些场景来帮助大家理解使用面板的功能。相比起Wireshark等一些网络抓包工具而言，ChromeNetwork更为简单易用，查看HTTP/2或者HTTPS等请求报文也更为方便，对于前端展示或者网络连接产生的一些问题，定位也更为轻松快捷。

相关标签： 程序员、 工具、 抓包过滤、 前端、

本文地址：https://www.badfl.com/article/50f79f75704c362b9299.html

上一篇：新站收录如何快速收录？...
下一篇：前端HTTPS到底加密了什么？云叔...