浏览器的调试工具，是个非常好用的东西，本篇文章就来介绍调试工具中，常用的抓包工具——网络栏
接下来就开始介绍，网络栏的基本操作。【这么快，开头就一句话？因为没啥说的，直入主题，程序员的就这么耿直】
0. 环境介绍
环境介绍：Chrome 75 版本
网址： http://www.spbeen.com 【如果网址打开慢或者没有样式，多刷新几次】
1. 调试工具的启动界面
浏览器是我们日常使用非常频繁的东西了，但是调试工具【F12打开】，应该就我们程序员会打开来使用。
调试工具里面的Elements栏【标签栏】，是查看HTML结构和CSS样式的，如下图：
sshot-1.png
注意看菜单栏，菜单栏~
菜单栏里面有我们常用的功能模块，分别是：
- Elements【标签栏】
- Console【控制栏】
- Sources【文件栏】
- Network【网络栏】
- Perfomance【性能栏】
- Memory【内存】......
后面的省略了，因为常用的是前四个，没错，是Elements、Console、Sources、Network这四个。本篇文章专门介绍Network这栏，里面记录着我们需要的网络请求包....
2. Network网络栏的界面
先看下网络栏打开的样子，如下图：
rec_network_1.gif
sshot-2.png
当前界面的右侧，就是网络栏的，内容呢都是空的，接下来就开始学习使用了
1. 如何使用这个查看网页的请求，如下GIF动图：
rec_network_1.gif
只有在打开调试工具网络栏的前提下，再次让网页发生请求，网络栏将请求记录统计下来
2. 清空记录操作，如下GIF动图：
clear_netwok_log.gif
3. 图片记录功能
在网页加载时，出了可以记录当前的请求记录，还可以捕捉网页上的图片变化，一个小小的功能，需要手动开启。
首先打开图片记录功能的按钮，如下图：
icon_camera.png
启动之后，是这个样子的：
camera_icon_light.png
启用功能后，刷新页面，等待页面加载结束，图片就出来了。注意，网页响应速度越快，图片就越少；网页数据多加载慢，图片就越多；
record_pic_select_change.gif
双击图片可以放大，底部的左右方向箭头，可以切换图片
4. 按时间范围显示
在加载请求时，会有时间的进度条展示，如下图：
time_progress_select.png
这块区域，不仅仅可以展示，还可以选择，按时间来选择，具体操作如下GIF动图：
select_time_area.gif
5. 按请求类型展示
请求也是有很多类型的，当然这里可以分类展示，分类按钮在下图：
sshot-3-fenleixuanzekuang.png
默认是选中All 全部类型，还有XHR栏【注释：Ajax相关的一个重要对象是XMLHttpRequest对象（XHR）】、JS文件请求、CSS文件请求、Img图片请求、Media媒体文件、Font字体文件等等.....
点击不同的分类类型，即可切换，当然有就展示，没有就是空，有就展示，如下GIF图：
network_type_select.gif
6. 保留之前的记录
通常，在网页跳转的时候呢，上一个记录都会被清空，然后新页面请求时，自动记录。如果跳转的过程有多次跳转，怎么查看中间的请求记录？
网络栏有个复选框 Preserve Log，选中它之后，只要是被记录的请求，都不会被清空，一直保留着，下图：
preserve_log_status.png
默认这个复选框是不勾选的，每次刷新页面，请求记录会清空一次，并重新记录，如下GIF图：
reflush_webpage_five_time.gif
但是勾选了这个框之后的，每次的内容都不会被清空，所以请求记录一直在堆叠，如下图：
save_and_reflush_webpage_five_time.gif
这个就是请求记录保持记录的小技巧，勾选之后，立马见效。通常用于抓一些跳转的包，是非常有用的。
7. 查询功能
这是一个非常实用的功能，用来找数据，超级有用。但是最好有个前提，就是要有请求，有内容才可以查询。首先，看下如何打开network的搜索框，如下图：
network_ctrl_f.gif
在有记录和没有记录的情况下，都可以打开搜索框。接下来演示下搜索操作：
network_ctrl_f_search.gif
这里出来的结果是按每块的内容来的，每块都是一个请求，里面的详细的行数和结果关键词高亮，如下图：
network_ctrl_f_search_result.png
得到结果后，直接点击你想查看的内容，就会之间弹出响应的详情内容，并跳转到具体的行上面，如下：
network_ctrl_f_search_result_select_redirect.gif
8. 响应框的功能介绍
在第七个“查询功能”中，最后主动弹出了响应内容框，那这个框有哪些重要的内容呢？下面开始来介绍这个了：
network_response_detail_window.png
在顶部，有五个选项，分别是：
- Headers：这里记录着请求和响应的头部信息
- Preview：响应的预览窗口，例如 格式化查看Json 或 视图化HTML
- Response：这是响应内容的展示窗口
- Cookies：Cookie信息的展示窗口
- Timing：时间记录的窗口
都是信息的展示窗口，没什么其余的操作了。但是Response这栏，有个搜索功能，一样的都是CTRL+F，如下图：
network_response_ctrl_f.gif
这是搜索操作，搜索框内还有几个功能可用，一并介绍下：
sshot-3-network-response-search_result.png
以上就是本篇文章的全部介绍内容了
！放在最后
如果文章中有什么错误或者建议修改的地方，欢迎留言纠正和回复
如果你喜欢本篇文章，不妨关注一下我们的公众号，每周更新两篇原创技术文档，都是干货
微信公众号二维码美化图001.png
网友评论