如何通过界面元素准确找到使用的后端接口？

问题背景
我们都知道：通过浏览器调试模式的“网络”可以知晓前端界面调用的后端接口有哪些，从而可以通过分析接口的状态（如异常响应或响应内容与期望不一致）来判定是否是后端接口存在可能的故障。但是，如果一个页面有许多元素（例如许多“卡片”），那么如何能够快速、准确地找到其中某一个元素（比如某一个“卡片”）调用或绑定的后端接口呢？例如：使用百度搜索功能，页面会展现许多内容，包括搜索结果、百度热搜等等。那么，试问如何能够快速且准确定位“百度热搜”调用的后端接口呢？

图1 百度搜索界面

问题分析
打开浏览器调试窗口，选择“网络”。可以看到列出的js文件和调用的所有后端接口（如下图所示）。

图2 百度搜索界面调试窗口

想要达到我们的目的：找到界面“百度热搜”元素使用的js文件，以及绑定的后端接口。
方法如下：
1)点击“网络”左上角搜索图表（放大镜图样）；

2)搜索框输入“百度热搜”即可显示出该元素所在的js文件，及在文件中的具体位置，如下图所示。 图3 百度搜索界面调试窗口网络过滤

3）js文件就近查找，可以发现该元素绑定的后端接口，如下所示可以发现“百度热搜”请求的后端接口是https://top.baidu.com/board。

图4 百度搜索界面调试窗口网络过滤结果

4）验证浏览器新窗口输入https://top.baidu.com/board查询，的确为百度热搜返回结果，验证成功。

图5 新标签页Url请求结果

问题拓展
1.查找接口绑定的js文件
前面简单介绍了如何通过前端界面元素寻找绑定的后端接口，那么现在我们来思考，如何通过请求的接口查询绑定的前端文件呢？如下图所示，通过浏览器调试窗口观察到存在接口/pcsearch，如何得知引用该接口的前端文件？

图6 百度搜索界面调试窗口

使用接口方法如下：

1）点击该接口名称，如”pcsearch”，在“启动器”一栏可以看到使用该接口的js文件： 图7 百度搜索界面调试窗口使用接口展示 2）将鼠标放置在“启动器”的js文件上，可以看到该js文件中请求该接口的代码，如：1.getData： 图8百度搜索界面调试窗口使用接口绑定的启动器

3）验证点击“@ result_8da0d0c.js:formatted:162”打开1.getData代码段落,可以看到js文件中该接口的调用方式，如下图所示：

图9百度搜索界面调试窗口使用接口绑定的启动器启动器代码

2.快速查看js文件代码
如果知道了一个js文件名，如何快速查找该文件代码内容呢？点击“源代码”，ctrl+p打开搜索框，输入js文件名即可。如下图所示，搜索index.js即可。

图10 百度搜索界面调试窗口js源代码文件搜索

点击找到的js文件后，点击下方{}符号即可阅读解码后的内容。

图11 百度搜索界面调试窗口js源代码

结论
本文讲解了如何通过前端元素快速查找绑定的后端接口方法，如何通过接口查找其被引用的js文件，以及如何知道js文件名快速查看js代码三个问题的方法。对于测试人员来说，能够通过前端报错或前端异常快速挖掘后端接口问题是一个值得掌握的技巧。希望能帮到身为测试人员的你~

转自公众号投稿：https://mp.weixin.qq.com/s/ru9429zAJNxG3hLh-zGmEg