如何使用我们的浏览器的f12工具

340 阅读2分钟

接口文档中,我们可以查看到对应的三个重要元素

  • 接口地址
  • 接口请求方式
  • 请求参数

上面这三个东西,我们不需要自己发挥,只要写对了,请求不到数据,就不是前端的问题(但是一定要注意,自己的url,字段名和请求方式都是正确的)。

如何才能判断我们对应的请求是否正确

image.png截下对应的网络图

在浏览器中,开发者工具(F12)中,有网络选项卡,该选项卡下可以看到所有的我们的ajax请求。

image.png 切换到网络选项卡,我们可以看到对应的请求

image.png 上面这张图中,没有对应的网络,请求,原因是,在发起请求后我们才打开了f12所以,请求没有被记录。刷新页面即可。

切换到xhr中

我们需要在网络里查看所有的ajax请求,就需要筛选xhr,点击Fetch/XHR即可筛选所有的ajax请求

image.png

网络记录

当发生相关请求时,网络请求就会被记录

image.png 如果对应的操作发生了问题,我们需要查看对应的请求是否正确

查看请求详情

点击网络列表中的某个请求,在右侧会打开一个新的窗口,我们需要知道这几个东西里哪个经常使用

image.png

  • 标头

标头中包含了,我们相关的请求信息。对于前段来讲两个比较重要的信息,是请求URL和请求方法,我们可以在标头中,确定我们的请求地址和请求方式是没有错误。和接口文档进行对比,

image.png

  • 负载

负载中包含了我们所有的请求的参数,在这里可判断我们是否对文档要求的参数传递是否正确

image.png

  • 预览

预览里,可以让我们查看到最终的请求结果。

image.png

常见报错

image.png 图上右侧的84表示报错在84行,遇到这种报错,意思就是说,我们获取value属性时使用的xxx.value,xxx是一个null