【编号0001】浏览器的调试工具介绍——网络栏

浏览器的调试工具，是个非常好用的东西，本篇文章就来介绍调试工具中，常用的抓包工具——网络栏

接下来就开始介绍，网络栏的基本操作。【这么快，开头就一句话？因为没啥说的，直入主题，程序员的就这么耿直】

0. 环境介绍

环境介绍：Chrome 75 版本

网址： http://www.spbeen.com 【如果网址打开慢或者没有样式，多刷新几次】

1. 调试工具的启动界面

浏览器是我们日常使用非常频繁的东西了，但是调试工具【F12打开】，应该就我们程序员会打开来使用。

调试工具里面的Elements栏【标签栏】，是查看HTML结构和CSS样式的，如下图：

注意看菜单栏，菜单栏~

菜单栏里面有我们常用的功能模块，分别是：

• Elements【标签栏】
• Console【控制栏】
• Sources【文件栏】
• Network【网络栏】
• Perfomance【性能栏】
• Memory【内存】…

后面的省略了，因为常用的是前四个，没错，是Elements、Console、Sources、Network这四个。本篇文章专门介绍Network这栏，里面记录着我们需要的网络请求包…

2. Network网络栏的界面

先看下网络栏打开的样子，如下图：

当前界面的右侧，就是网络栏的，内容呢都是空的，接下来就开始学习使用了

1. 如何使用这个查看网页的请求，如下GIF动图：

只有在打开调试工具网络栏的前提下，再次让网页发生请求，网络栏将请求记录统计下来

2. 清空记录操作，如下GIF动图：

3. 图片记录功能

在网页加载时，出了可以记录当前的请求记录，还可以捕捉网页上的图片变化，一个小小的功能，需要手动开启。

首先打开图片记录功能的按钮，如下图：

启动之后，是这个样子的：

启用功能后，刷新页面，等待页面加载结束，图片就出来了。注意，网页响应速度越快，图片就越少；网页数据多加载慢，图片就越多；

双击图片可以放大，底部的左右方向箭头，可以切换图片

4. 按时间范围显示

在加载请求时，会有时间的进度条展示，如下图：

这块区域，不仅仅可以展示，还可以选择，按时间来选择，具体操作如下GIF动图：

5. 按请求类型展示

请求也是有很多类型的，当然这里可以分类展示，分类按钮在下图：

默认是选中All 全部类型，还有XHR栏【注释：Ajax相关的一个重要对象是XMLHttpRequest对象（XHR）】、JS文件请求、CSS文件请求、Img图片请求、Media媒体文件、Font字体文件等等…

点击不同的分类类型，即可切换，当然有就展示，没有就是空，有就展示，如下GIF图：

6. 保留之前的记录

通常，在网页跳转的时候呢，上一个记录都会被清空，然后新页面请求时，自动记录。如果跳转的过程有多次跳转，怎么查看中间的请求记录？

网络栏有个复选框 Preserve Log，选中它之后，只要是被记录的请求，都不会被清空，一直保留着，下图：

默认这个复选框是不勾选的，每次刷新页面，请求记录会清空一次，并重新记录，如下GIF图：

但是勾选了这个框之后的，每次的内容都不会被清空，所以请求记录一直在堆叠，如下图：

这个就是请求记录保持记录的小技巧，勾选之后，立马见效。通常用于抓一些跳转的包，是非常有用的。

7. 查询功能

这是一个非常实用的功能，用来找数据，超级有用。但是最好有个前提，就是要有请求，有内容才可以查询。首先，看下如何打开network的搜索框，如下图：

在有记录和没有记录的情况下，都可以打开搜索框。接下来演示下搜索操作：

这里出来的结果是按每块的内容来的，每块都是一个请求，里面的详细的行数和结果关键词高亮，如下图：

得到结果后，直接点击你想查看的内容，就会之间弹出响应的详情内容，并跳转到具体的行上面，如下：

8. 响应框的功能介绍

在第七个“查询功能”中，最后主动弹出了响应内容框，那这个框有哪些重要的内容呢？下面开始来介绍这个了：

在顶部，有五个选项，分别是：

• Headers：这里记录着请求和响应的头部信息
• Preview：响应的预览窗口，例如 格式化查看Json 或 视图化HTML
• Response：这是响应内容的展示窗口
• Cookies：Cookie信息的展示窗口
• Timing：时间记录的窗口

都是信息的展示窗口，没什么其余的操作了。但是Response这栏，有个搜索功能，一样的都是CTRL+F，如下图：

这是搜索操作，搜索框内还有几个功能可用，一并介绍下：

以上就是本篇文章的全部介绍内容了

---

！放在最后

如果文章中有什么错误或者建议修改的地方，欢迎留言纠正和回复

如果你喜欢本篇文章，不妨关注一下我们的公众号，每周更新两篇原创技术文档，都是干货