1.4 实战：通过浏览器查看接口请求详细信息

进入开发者工具有三种方式

1. F12键

1. 鼠标右键选择检查

1. 使用组合快捷键

windows下为 Ctrl+Shift+i

macos下为 command+options+i

我们先来把开发者工具设置成中文，我们点击右上角的小齿轮(注意不要点错了)

在Preferences中的Language中选择中文

随后关闭开发者工具，再次打开，这样就变成中文了

我们可以看到它有很多个模块，我们点击网络

这里可以展示当前网页的一些请求，包括接口、js、css、图片、媒体、文字等等的信息。我们一般使用网络模块主要是抓包的，就是查看网页上的接口信息。我们选择Fetch/XHR，就可以查看具体的接口信息

接口信息包括名称、方法、状态、时间等等。可以看到有一个接口的调用，这是一个获取图像验证码的接口，接口返回花了40毫秒。我们点击接口的名称get_kaptcha，这个时候可以看到接口的一些基本信息，比如请求网址，请求方法，状态码等等，下面还有响应标头以及请求标头。这是标头的部分，还有预览、响应，这两个是查看接口返回的信息的。预览里可以直接看到验证码的图片。

我们登录进系统再继续查看其他接口。

输入用户名密码以后点击登录，登录进系统，可以看到左侧多了很多接口的调用

进入到首页会调用多个接口，来完成首页的加载。我们点击login这个接口，可以看到它多了载荷这部分的内容

这部分是登录接口的入参部分，是以json为格式的，json我们后续也会跟大家详细讲解，不管对json多熟，都要好好听一听，说不定就有你不了解的部分。

我们再点击预览，就会出现返回值，是以折叠的形式来展示的

我们再点击响应，这里其实就是把前面预览的部分直接展示出来了，我们可以直接复制返回值，来去做其他的查看或者编辑操作

好，上面的内容是不是很简单？开发者工具其实就是浏览器自带的一个抓包工具，我们可以很轻松的使用它来帮助我们完成接口信息的审查，比如接口的入参是什么，返回值是什么。