![5372e864c99d4372e1c68864d137d44d.png](https://i-blog.csdnimg.cn/blog_migrate/37865c8d5640cf3b94f22845f98c9f80.jpeg)
浏览器的调试工具,是个非常好用的东西,本篇文章就来介绍调试工具中,常用的抓包工具——网络栏
接下来就开始介绍,网络栏的基本操作。【这么快,开头就一句话?因为没啥说的,直入主题,程序员的就这么耿直】
0. 环境介绍
环境介绍:Chrome 75 版本
网址: http://www.spbeen.com 【如果网址打开慢或者没有样式,多刷新几次】
1. 调试工具的启动界面
浏览器是我们日常使用非常频繁的东西了,但是调试工具【F12打开】,应该就我们程序员会打开来使用。
调试工具里面的Elements栏【标签栏】,是查看HTML结构和CSS样式的,如下图:
![6911e6969e6e72b8c4e2e4712d664d06.png](https://i-blog.csdnimg.cn/blog_migrate/9c1bbd3aff83b49a332d6e8abeccf1d3.jpeg)
注意看菜单栏,菜单栏~
菜单栏里面有我们常用的功能模块,分别是:
- Elements【标签栏】
- Console【控制栏】
- Sources【文件栏】
- Network【网络栏】
- Perfomance【性能栏】
- Memory【内存】......
后面的省略了,因为常用的是前四个,没错,是Elements、Console、Sources、Network这四个。本篇文章专门介绍Network这栏,里面记录着我们需要的网络请求包....
2. Network网络栏的界面
先看下网络栏打开的样子,如下图:
![b3b6b74c78f2d13374fe7dbc84e87c23.png](https://i-blog.csdnimg.cn/blog_migrate/aa804c391cc7408f73e6cf360463a58e.jpeg)
当前界面的右侧,就是网络栏的,内容呢都是空的,接下来就开始学习使用了
1. 如何使用这个查看网页的请求,如下GIF动图:
![282ea2b489dcd1b68032fe8bd432e884.gif](https://i-blog.csdnimg.cn/blog_migrate/ab342e74d9a004d33cb95dd6ad0cb44b.gif)
只有在打开调试工具网络栏的前提下,再次让网页发生请求,网络栏将请求记录统计下来
2. 清空记录操作,如下GIF动图:
![9270047928ab325d02216087469cd182.gif](https://i-blog.csdnimg.cn/blog_migrate/689379874ef1024717a7e86437d5765d.gif)
3. 图片记录功能
在网页加载时,出了可以记录当前的请求记录,还可以捕捉网页上的图片变化,一个小小的功能,需要手动开启。
首先打开图片记录功能的按钮,如下图:
![7cbb6666ff8528f3c8205653d3ee48cc.png](https://i-blog.csdnimg.cn/blog_migrate/6f67c9b4cc56821587a975ddaff89ba8.jpeg)
启动之后,是这个样子的:
![8426a11f95bd0efa8eaa04429f1e4dfb.png](https://i-blog.csdnimg.cn/blog_migrate/b274688a4229e7156256684bd1c1e589.jpeg)
启用功能后,刷新页面,等待页面加载结束,图片就出来了。注意,网页响应速度越快,图片就越少;网页数据多加载慢,图片就越多;
![f51d982bef0d1ed3be90f911f25cdc63.gif](https://i-blog.csdnimg.cn/blog_migrate/7ded3876c5bba715c1c5e00b42b650a1.gif)
双击图片可以放大,底部的左右方向箭头,可以切换图片
4. 按时间范围显示
在加载请求时,会有时间的进度条展示,如下图:
![8ef87579028e7f36f157bee7e279716c.png](https://i-blog.csdnimg.cn/blog_migrate/b290fff20affeb4fe1c3f0cce46d4a5f.jpeg)
这块区域,不仅仅可以展示,还可以选择,按时间来选择,具体操作如下GIF动图:
![8b71979c3871c14513a8871a52b0f4f6.gif](https://i-blog.csdnimg.cn/blog_migrate/05810f550cd786edfba1cc867fd7f836.gif)
5. 按请求类型展示
请求也是有很多类型的,当然这里可以分类展示,分类按钮在下图:
![cba4ef2741c7965c65eaf1d6d5d1c8df.png](https://i-blog.csdnimg.cn/blog_migrate/f71d69b684a648b1bd8c3afb4c9f83cd.jpeg)
默认是选中All 全部类型,还有XHR栏【注释:Ajax相关的一个重要对象是XMLHttpRequest对象(XHR)】、JS文件请求、CSS文件请求、Img图片请求、Media媒体文件、Font字体文件等等.....
点击不同的分类类型,即可切换,当然有就展示,没有就是空,有就展示,如下GIF图:
![f74ab448404ba5a9f9963e34f3357554.gif](https://i-blog.csdnimg.cn/blog_migrate/2fe6d7ea7dbd6d3e87064a57cafc7784.gif)
6. 保留之前的记录
通常,在网页跳转的时候呢,上一个记录都会被清空,然后新页面请求时,自动记录。如果跳转的过程有多次跳转,怎么查看中间的请求记录?
网络栏有个复选框 Preserve Log,选中它之后,只要是被记录的请求,都不会被清空,一直保留着,下图:
![9d6490cd129c1620a6a25c73b08840e2.png](https://i-blog.csdnimg.cn/blog_migrate/e91788342262e0dc4272b8f32b37a905.jpeg)
默认这个复选框是不勾选的,每次刷新页面,请求记录会清空一次,并重新记录,如下GIF图:
![cedf95994f426d9efd975117acb8a826.gif](https://i-blog.csdnimg.cn/blog_migrate/e5a1a9a2270c13d03be1fec57666b75b.gif)
但是勾选了这个框之后的,每次的内容都不会被清空,所以请求记录一直在堆叠,如下图:
![b0899f91a95c5fc45e8cec1203ac988c.gif](https://i-blog.csdnimg.cn/blog_migrate/93f5853fe9714b8b12503b296e0806b3.gif)
这个就是请求记录保持记录的小技巧,勾选之后,立马见效。通常用于抓一些跳转的包,是非常有用的。
7. 查询功能
这是一个非常实用的功能,用来找数据,超级有用。但是最好有个前提,就是要有请求,有内容才可以查询。首先,看下如何打开network的搜索框,如下图:
![1fceb478bb313303eb7b98def93defc8.gif](https://i-blog.csdnimg.cn/blog_migrate/e0cfb9a605d1ff503fbff19d9968fc84.gif)
在有记录和没有记录的情况下,都可以打开搜索框。接下来演示下搜索操作:
![b0b66f20916fc63970ed5ed055cd9cee.gif](https://i-blog.csdnimg.cn/blog_migrate/7ab8d8b586d66d69d7cdc516a22588f4.gif)
这里出来的结果是按每块的内容来的,每块都是一个请求,里面的详细的行数和结果关键词高亮,如下图:
![8c24d03bfe109899d29463ac02ce37fa.png](https://i-blog.csdnimg.cn/blog_migrate/b3a82789560ed61f04daebe931e5bbc0.jpeg)
得到结果后,直接点击你想查看的内容,就会之间弹出响应的详情内容,并跳转到具体的行上面,如下:
![44c13eadfb4ac44bb6cade12ad7b20be.gif](https://i-blog.csdnimg.cn/blog_migrate/bb537184b355e7c0c107014d7ab3cc1d.gif)
8. 响应框的功能介绍
在第七个“查询功能”中,最后主动弹出了响应内容框,那这个框有哪些重要的内容呢?下面开始来介绍这个了:
![7e7b568488bc96e917c2c422e35c0178.png](https://i-blog.csdnimg.cn/blog_migrate/cdfb5bec671faa56ea76e1c7ad283b35.jpeg)
在顶部,有五个选项,分别是:
- Headers:这里记录着请求和响应的头部信息
- Preview:响应的预览窗口,例如 格式化查看Json 或 视图化HTML
- Response:这是响应内容的展示窗口
- Cookies:Cookie信息的展示窗口
- Timing:时间记录的窗口
都是信息的展示窗口,没什么其余的操作了。但是Response这栏,有个搜索功能,一样的都是CTRL+F,如下图:
![b66ce430683d204a789b1177ed7bf278.gif](https://i-blog.csdnimg.cn/blog_migrate/88d64301c6d7ebe75cd1509964d2f51b.gif)
这是搜索操作,搜索框内还有几个功能可用,一并介绍下:
![4970731ad8e3bc9939753c85027def2e.png](https://i-blog.csdnimg.cn/blog_migrate/648f7084d9bb230f5b2092d0f4c480a7.jpeg)
以上就是本篇文章的全部介绍内容了
!放在最后
如果文章中有什么错误或者建议修改的地方,欢迎留言纠正和回复
如果你喜欢本篇文章,不妨关注一下我们的公众号,每周更新两篇原创技术文档,都是干货
![dcbb366ed4adb91fa8d47bedba147406.png](https://i-blog.csdnimg.cn/blog_migrate/856d84287c49d4ad2532d4a8cdacdff3.jpeg)