F12-开发者工具常用操作与使用说明之网络network

查看启动器

这是请求启动器的调用链接的演示。开发过程中经常用到吗？发送请求已经是我们最基本、最常见的需求，我们也经常与之接触，但是我们经常会遇到各种各样的问题，有些问题是显而易见的。

我们可以直接定位问题，但是有些问题我们无法把握。今天我就给大家讲解一下，或者介绍一些关于网络面板使用的技巧，可以帮助我们快速检查定位问题，甚至解决我们遇到的问题。在开发过程中，

当我们遇到问题的时候，不要害怕。有了F12，我们就有了一把利剑，可以划破困难和荆棘，所有的疑惑终将水落石出。我们要记住，发现一个问题，一定要先看两个地方。第一个是控制台面板。

另一个是网络面板。我们之前已经向您介绍了控制台控制台，所以让我们看看网络如何帮助我们！

我们开始吧

首先，我们简单看一下这个面板给我们提供了哪些功能。因为图片比较细长，所以我们分两部分来解释：

第一部分

这个部分提供了四个图标，分别是：博客的记录：一般我们都是一直开着的，这样我们就可以得到我们需要的数据。如果我们停止，所请求的记录将不会被执行，所以只要永远启动它。清空日志：清空记录的请求日志。

过滤：通过一些条件对发送的请求进行过滤，我们可以过滤掉不想看到的请求，从而快速定位到想要看到的请求。这也是我们接下来要讲的重点，我们大多数人都在处理这个。

搜索：我们可以通过关键字搜索我们要找的请求。与过滤不同的是，我们可以通过搜索输入包含返回值的文本来查询所有内容。

搜索

也就是说，它包含了Headers、Perview或Response中的所有内容。您可以使用大小写匹配和常规形式进行搜索。

第二部分

此部分提供了三个功能：保留日志：如果选中此项，则刷新页面时不会清空以前的请求日志。其实不仅仅是页面被刷新，页面跳转也会被保留。例如，当登录页面跳转到主页时，之前的请求不会丢失。

这对于查看页面更改前自动启动的一些请求非常有用。同时，我在这里补充一句。在开发者工具右上角的设置(小齿轮图标)中，我们可以勾选打开新窗口时自动打开开发者工具。

这样我们就不用担心永远打不开F12，看不到我们想看的请求了。

自动打开F12

在设置面板勾选此项即可！停用缓存：浏览器有时会缓存一些数据。根据设置机制的不同，浏览器会采用不同的缓存策略，一般来说这是非常有用的，但是在开发和调试阶段，我们希望总是获得最新的数据。

那么我们可以在此时取消选中此项，这样就可以随时获取最新的数据，而不用使用缓存。网络模式：这里提供了四种默认模式。当然，我们也可以点击小wifi风格的图标进行自定义。

当我们模拟一些特殊的环境时，简单看一下这些模式将会非常有用。

网络模式

1.节流模式已被禁用，将使用默认网络模式，即您的正常在线环境。2.会用高速3G，网速会慢一些，网络请求会有延迟，这在模拟网络环境差的时候很有用，可以看到页面加载的过程。

以及意想不到的效果。3.庸俗的3G，同上，只是一个很差的网络的模拟。4.线下，可以离线查看网站的运营情况。

其他的

最后，实际上有这两个功能图标，这意味着导入和导出HAR文件，我们一般不需要。你可以把它想象成一个文件，按照一定的规范把请求以固定的格式导出到一个地方，需要的时候可以导入到一个可以解析的地方。

要播放请求回放的效果，这里就不多介绍了。

接下来我们重点来看一下过滤这块。同样，这里我们分三部分来分别讲述：

第一部分

当我们选中过滤的时候，将会在下方出现各种过滤条件，有输入框，也有快捷选项。过滤框：我们可以在这里输入关键字来筛选请求。反转：勾选此项，将会筛选出所有不符合过滤条件的请求，相当于反选。

隐藏数据网址：勾选此项表示要隐藏那些为数据请求的URL，如data:image/png;base64。

第二部分

这一部分没什么好说的，就是按照不同的请求类型，进行了一个快速的分类选择，我们经常关心Fetch/XHR选项，也就是我们所发送的接口请求。

第三部分

同样，这里又提供了另外三个维度的筛选方式：有已拦截的Cookie：有cookie被拦截的请求。被屏蔽的请求：如果设置了屏蔽某个请求(鼠标在某个请求上右键就可以屏蔽)，勾选此项会查看到。

第三方请求：勾选此项会查看非本域的请求。

最后我们来实际看一下，当我们找到要查看的请求的时候，我们都能从这些请求中获取什么有用的信息，并且了解如何解决我们产生的诉求。

几种请求方式

通过这几种不同的请求方式，来模拟一下我们实际的工作场景，使用浏览器为我们提供的功能来解决产生的问题，或者帮助我们更快的开发调试。1.带query的get请求

带query的get请求

参数会直接拼在地址后面。

Payload

载荷(Payload)中会展示出请求参数项，并且在点击[查看网址编码格式的数据]时，会切换编码状态与解码状态。

编码

可以看到对中文进行了编码。

Preview

预览(Preview)表示接口的返回值，展示出浏览器格式化后的样式。响应(Response)同预览，只不过是原始文本，未格式化。

Initiator

启动器(Initiator)会展示出该请求的触发链路，即：该请求是由谁触发的，并且它的调用者是谁，以及更上层的调用者是谁，每一层的方法调用链路都会在这里展示出来，方便我们定位到请求发起的地方，

比如这个例子中，我们一下子就能够快速的定位到是由我们的业务代码ajax1方法发起的，并且它在HelloWorld.vue文件中。我们单击该文件就可以查看具体的内容。

定位发起点

这极大的方便了我们查找接口调用的位置的操作。尤其我们在改别人代码的时候，如果对业务不熟悉或者一时找不到请求在哪里发起的，那么通过这个我们就能很快速的定位到目标方法，

而且我们现在都是使用构建工具打包生成的代码，找一个方法特别难受，这个时候就可以根据请求快速找到方法，供我们打断点等调试操作。

Timing

时间(Timing)展示了接口调用在不同阶段的耗时。

Cookies

Cookies展示了该请求携带的cookie信息。2.JSON的post请求

JSON的post请求

我们把get请求携带的字段叫做请求参数，把post请求携带的字段叫做请求体，post请求的请求体不会在地址栏后面显示。

请求体

请注意这里文字的变化，get请求时，这里叫做查询字符串参数，而现在这里叫做请求载荷，这时后端是以json的形式进行接收和解析的。这是以axios为例来默认发起的。

post

3.FORM的post请求其他与上面相同，我们只来看下载荷的区别：

FORM形式

我们发现这里的文字变成了表单数据，是因为这次我们是使用的form表单的形式发送的请求，后端会以form的形式接收并解析请求体字段。

qs转换

我们这里是使用qs来进行转换的，这下大家知道了为什么有的时候要用qs，而有的时候却不需要，也清楚了为什么后端有时候能接收到字段，但是有时候接收不到了吧，根据具体的场景和约定，

我们就可以随意切换不同的形式来进行传参。下次再碰到的时候我们就可以通过这里快速查看是否自己的传参形式不对呢。4.带数组的请求这里有两种情况，后端如果是整体以json的形式接收的，那么是可以正常传参的，

但是如果是以明确字段类型为string的，那么数组字段在发送前注意使用JSON.stringify等方式先转换一下。还有一个就是，如果使用不同的格式的话，那么浏览器会展现的不一样，

来感受一下不同方式数组的传参形式：JSON形式

JSON形式

FORM形式

FORM形式

5.带query的post请求

带query的post请求

可以看到，地址栏已经被追加了请求参数。

载荷

这个时候就有了两个地方的传参，一个是查询字符串参数，还有一个是请求载荷。这两种传参的方式都会被后端接收到。

补充返回值右键

在请求返回值数据任意层级上面右键，即可进行相应的操作，算是一个快捷指令，这对数据量多和层级复杂的情况可能会使用到，这里就不一一介绍了，都是简单的字面意思。其中向监视表达式添加属性路径的意思是说，

当我们在执行断点的时候，我们不是可以监听某个字段或者表达式的值么，选中这个，就会把这个你选择的表达式添加到里面，类似于这样。

添加监听

总的来说工欲善其事，必先利其器！希望大家都能熟练的掌握这里面的各种技巧，这样我们解决起问题来才能得心应手，希望这些能给你带来帮助，提高解决问题的效率。

谢谢