web问题定位：F12，如何找到对应接口

傷城~ 2024-03-25 22:41 111阅读 0赞

接口查看法，是我们最常用的定位前后端问题的方法。即：一般用来查看是后端返回给前端的数据有误，还是前端显示有误。  
主流浏览器（如Chrome，FireFox，等）都有自带的接口查看工具，可以通过F12（设置–工具–开发者工具）开启抓包。每进行一个操作，一般都会调用对应的接口，在NetWork中可以看到当前页面发送的每个请求。以谷歌浏览器为例：

### 1、进入 NetWork页面 ###

如图，按F12，切换到NetWork页面，默认展示的是All页面。.js、 .css 、.ico、.png 这些结尾的都是前端的渲染、图标、图片等，不是接口。  
![f90427e6142e47d0b745ee6d9fba7d06.png][]

### 2、点击Fetch/XHR，这里可以看到页面发起的接口 ###

![db70170f661a439a9ebf422280dfbd48.png][]

### 3、找到出问题的接口 ###

很多时候，执行一个操作，可能调用了多个接口，就需要判断当前问题对应的是哪个接口：  
1）查看开发的接口文档；  
2）如果没有接口文档，清空Network列表，进入测试界面。然后执行操作，如果有多个请求，逐个查看哪个接口的入参或响应数据是你刚操作的数据；  
3）如果没有接口文档，出入参还是加密的，我也不会（我只会逐个接口解密入参看是哪个，或者直接问开发）；  
4）最便捷的：问你的开发，是哪个接口（如果有文档还一直问，怕是会被骂）。

### 4、NetWork页面怎么看接口详情 ###

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

![2eb809e65d304eb995df1a32db195103.png][]

### 5、问题定位 ###

1）一般情况下，console中的报错信息属于前端问题。但是，有些时候console有报错，但不是bug（看是否影响功能）；  
2）请求地址错误、请求体参数缺漏或错误，这些都是前端问题；  
3）response 或 preview 中，没有返回值，或者返回的内容错误（与操作结果不符，有权限的话可以查看数据库），是后端问题。  
4）前端界面显示的内容，与后端接口返回的内容不一样，是前端问题。

[f90427e6142e47d0b745ee6d9fba7d06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fbf67d29fe3242ac8d427501e4613673.png
[db70170f661a439a9ebf422280dfbd48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f1b1b77fa6624572bd42266a14f2aa5a.png
[2eb809e65d304eb995df1a32db195103.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cdeb1658623e42ffa0c1c094f725efc7.png