chromenetwork抓包_⽆需额外⼯具，简单抓包教程
⼤家可能都听说过⼀个名词，“抓包”。⽐如软件开发前后端联调，调⽤后端接⼝⽆反应，这时我们常常会说：“抓个包看看前端传递的数据吧”。⼜或者我们的⽹站接⼊ CDN 之后，想要看⼀下⽹站静态资源的缓存时间和⾃⼰设置的缓存策略是否⼀致，也会⽤到抓包。那什么是抓包呢？ 主机之间的数据通信都是通过⽹络来进⾏传输，⽽将⽹络传输发送与接收的数据包进⾏截获、重发、编辑、转存等操作，就是抓包。
抓包经常被⽤来进⾏数据截取与观察，⽤于获取 HTTP 标头、内容、⼤⼩等信息来进⾏分析，对判断软件的 Debug 很⼤的帮助。所以，学会抓包，对于排查⼀些⽹络问题⼗分重要。
主流抓包⼯具对⽐
先来简单看下有哪些常见的抓包⼯具，主要有下⾯⼏种：
Charles
Fiddler
WireShark
TcpDump
Chrome Network
其中⽬前主流的抓包⼯具有：TcpDump、WireShark、Fiddler，下⾯我们对这⼏个抓包⼯具的性能进⾏⼀些简单的对⽐。
1. TcpDump
Android 平台下的⽹络数据抓包⼯具，Android模拟器中⾃带 TcpDump ⽂件。
⽤ TcpDump 对⽹络数据抓包，⼿机不⽤⾛代理——将⽹络数据包添加到 WireShark 中分析即可。
简易过滤器缺点：
⼿机必须获取 root 权限；
不能查看实时通信数据——因为抓取的是 dump 出来的⽂件，⽽不能实时数据交互；
获取的数据很多，分析时需要过滤出真正有⽤的信息。
2. WireShark
PC 端截获、分析通过该⽹卡的所有⽹络通信的数据包(针对移动端时候，就要对移动端设置代理服务器)强⼤的⼯具，完整查看⽹络中的每层、每个协议、每个数据包的详细组成信息；TCP、UDP、HTTP、HTTPS 等协议的数据包均可获取；
缺点：
获取的信息太多，需要⼿动过滤、进⾏分析。
只能查看，不能修改、重发送⽹络数据包。
3. Fiddler
HTTP 协议的代理⼯具，抓取、分析电脑中所有进出该⽹卡、与⽹络进⾏数据交互的数据(针对移动端抓包时，需要设置代理服务器)，主要针对的是 HTTP/HTTPS 协议；能够清晰查看数据包中的内容——HTTPS中的数据包可以解密出来。
缺点：
⼿动修改需要花费时间，如果程序等待超时，本次设定的 Response 结果失效
Chrome Network 抓包介绍
上⽂中可以看到主流的抓包⼯具都或多或少地存在缺点，那有没有⼀款界⾯简单、易操作，可以⾮常⽅便的查看⽹页中所有的⽹络请求，并审核检查单个资源的属性，⽐如 HTTP 标头、内容、⼤⼩等的抓包⼯具呢？
Chrome Network 就可以做到。Chrome Network 是属于 Chrome DevTools 套件中的⼀个调试⼯具，下⾯我来对它的使⽤做⼀个简单介绍。
注：本篇教程适⽤于使⽤ Chromium 内核的浏览器，Microsoft Edge 和 Firefox 也有类似的控制⾯板，在此不再赘述。
如何打开开发者⼯具⾯板
1. 使⽤快捷键打开。
Control+Shift+J 或者 F12 (Windows)
Command+Option+J (Mac)
2.通过 [更多⼯具] - [开发者⼯具] 打开。
打开开发者⼯具后，切换到 [Network ⾯板]，⾯板的构成可查看下图：
控制器：可以开启/关闭 Network ⼯具的⽹络活动记录功能，以及其它⼀些配置选项。
过滤器：过滤请求列表中显⽰资源。
概览：以图形化的⽅式，显⽰ HTTP 请求响应的时间轴。
请求列表：⽹页中每⼀个资源请求记录，默认时间排序，点击可查看详细信息。
概要：包含了当前抓取的请求数，传输⼤⼩以及传输耗时等信息
接下来我们就来认识⼀下各个模块。
控制器
从左⾄右按钮的功能依次是：
停⽌/开始抓包，红⾊圆圈代表正在抓包；
清除请求列表中的所有请求；
屏幕截图；
隐藏/显⽰过滤器窗格；
查搜索；
增⼤请求列表每⼀⾏的⾏⾼；
隐藏/显⽰概览窗格
按照框架来整合资源
跨页⾯加载保存请求
停⽤浏览器缓存
模拟离线访问
模拟慢⽹速访问，可⾃定义⽹速
我们简单的来体验⼀下其中⼏个功能的使⽤。
场景⼀：如何模拟在本地没有缓存的情况下访问⽹页？
我们可以打开控制器的 [Disable cache] 功能，重新刷新页⾯，浏览器会模拟不带缓存的请求访问，保证每⼀个请求都是向⽹络中发起的。
场景⼆：请求列表只记录当前页⾯的访问请求，如果点击了⼀个超链接，跳转到另⼀个⽹页，这样就会清空之前的记录。能否在点击链接跳转之后，依旧保存之前的请求记录呢？
我们可以打开控制器的 [Preserve log] 功能，这样在点击链接跳转到新的页⾯后，跳转前的请求记录依旧会保留，⽅便我们跟踪请求响应。
过滤器
我们在访问⼀个⽹站的时候，可能会有⼏⼗个或者上百个请求，这些请求中有些是我们关⼼的，有些是我们不需要的，这个时候就可以快速的使⽤过滤器来筛选出我们关⼼的那些请求。
过滤器常见的过滤⽅式就是按类型过滤。
默认过滤中已经内置⼏种类型，⽐⽅说我们可以筛选出 JS 类的请求、图⽚类的请求或者是WebSocket 类型的请求，按住
[Ctrl(Windows)] 或者 [Command(Mac)] 可以同时选择多个过滤类型。
那么 [Hide data URLs] 选项是什么意思呢？
⽹站开发者很多时候会将⼀些⼩的图⽚或者 CSS 脚本，以 BASE64 格式嵌⼊到 HTML 中，以减少 HTTP 请求数。当勾选了 Hide data URLs 选项后，就可以隐藏掉请求列表中的像 data: 或者 blob: 类请求。
除了以上⼏个 Chrome 提供的过滤器以外，还可以⾮常灵活的在过滤框中使⽤过滤属性进⾏请求⽇志的筛选。
常见的过滤属性可参考下表。
属性释义
domain仅显⽰来⾃指定域的资源，可以使⽤通配符(*)指定多个域
das-response-header显⽰包含指定 HTTP 响应头的资源
is使⽤[ is:running ] 可以查 WebSocket 资源，[ is:from-cache ] 可以查缓存读取资源
lager-than显⽰⼤于指定⼤⼩的资源(以字节为单位)。将值设定为 1000 等同于设置为 1k
method显⽰指定 HTTP ⽅法类型资源
mime-type显⽰指定 MIME 类型的资源
status-code仅显⽰指定的 HTTP 状态代码响应资源
场景⼀：打开⼜拍云官⽹的时候，我们想筛选⽹页中来⾃于不同域名的请求资源，就可以在过滤框中输⼊ [domain:] ，Chrome 会帮我们
⾃动补齐相关的域名信息。
场景⼆：打开的⽹页中，如何查看哪些请求使⽤了缓存？使⽤命令 [is:from-cache]
请求列表
请求列表默认是按照资源请求发起的时间升序排列的，我们也可以选择按指定列排序，例如 [Waterfall] 列上右键，按照活动时间来进⾏排序。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议