f12怎么查看接口入参（web问题定位：F12，如何找到对应接口）

接口查看法                     ，是我们最常用的定位前后端问题的方法                     。即：一般用来查看是后端返回给前端的数据有误
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，还是前端显示有误
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 。

主流浏览器（如Chrome




















，FireFox 
  
  
  
  
  
  
  
  
  
  ，等）都有自带的接口查看工具
  
  
  
  
  
  
  
  
  
  
 ，可以通过F12（设置–工具–开发者工具）开启抓包




















。每进行一个操作
 


 


 


 


 


 


 


 


 


 


，一般都会调用对应的接口 
 
 
 
 
 
 
 
 
 
 ，在NetWork中可以看到当前页面发送的每个请求 
  
  
  
  
  
  
  
  
  
  。以谷歌浏览器为例：

1
  
  
  
  
  
  
  
  
  
  
、进入 NetWork页面

如图
   
   
   
   
   
   
   
   
   
   
 ，按F12
 

 

 

 

 

 

 

 

 

 

，切换到NetWork页面 

 

 

 

 

 

 

 

 

 

 ，默认展示的是All页面
  
  
  
  
  
  
  
  
  
  
 。.js  
  
  
  
  
  
  
  
  
  
 、 .css 
 


 


 


 


 


 


 


 


 


 


 、.ico
 
 
 
 
 
 
 
 
 
 
、.png 这些结尾的都是前端的渲染   
   
   
   
   
   
   
   
   
   
 、图标
 

 

 

 

 

 

 

 

 

 

 、图片等                     ，不是接口
 


 


 


 


 


 


 


 


 


 


。

2

 

 

 

 

 

 

 

 

 

 
、点击Fetch/XHR

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，这里可以看到页面发起的接口

3                     、找到出问题的接口 

很多时候



















，执行一个操作                                ，可能调用了多个接口
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，就需要判断当前问题对应的是哪个接口：

1）查看开发的接口文档；

2）如果没有接口文档






























，清空Network列表                     ，进入测试界面 
 
 
 
 
 
 
 
 
 
 。然后执行操作
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，如果有多个请求




















，逐个查看哪个接口的入参或响应数据是你刚操作的数据；

3）如果没有接口文档 
  
  
  
  
  
  
  
  
  
  ，出入参还是加密的
  
  
  
  
  
  
  
  
  
  
 ，我也不会（我只会逐个接口解密入参看是哪个
 


 


 


 


 


 


 


 


 


 


，或者直接问开发）；

4）最便捷的：问你的开发 
 
 
 
 
 
 
 
 
 
 ，是哪个接口（如果有文档还一直问
   
   
   
   
   
   
   
   
   
   
 ，怕是会被骂）
   
   
   
   
   
   
   
   
   
   
 。

4
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 、NetWork页面怎么看接口详情

一般响应数据在 preview 页面看比较清晰
 

 

 

 

 

 

 

 

 

 

，内容和 Response页面是一样的
 

 

 

 

 

 

 

 

 

 

。

5




















、问题定位

1）一般情况下 

 

 

 

 

 

 

 

 

 

 ，console中的报错信息属于前端问题 

 

 

 

 

 

 

 

 

 

 。但是                     ，有些时候console有报错

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，但不是bug（看是否影响功能）；

2）请求地址错误                               、请求体参数缺漏或错误



















，这些都是前端问题；

3）response 或 preview 中                                ，没有返回值
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，或者返回的内容错误（与操作结果不符






























，有权限的话可以查看数据库）                     ，是后端问题                     。

4）前端界面显示的内容
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，与后端接口返回的内容不一样




















，是前端问题

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

。