javascript - 确定 API 请求的来源？

Question

有人向我介绍了一个 Web 应用程序，我需要对其进行一些修改。

该应用程序非常庞大，大约有 100 个 Javascript 文件。这些文件始终向第三方 API 发送请求。

现在，在控制台中，我可以看到所有这些请求。假设一个看起来像:

GET http://123.456.789.10:8000/v1/accounts/accountnum/children?_=1422026843600

然后我当然可以看到发送的参数、 header 和响应。我的问题是我需要找到发送一个特定请求的 JS 文件。在所有文件中搜索 API 目标 URL 后发现有 40 或 50 个文件将请求发送到具有相似参数的同一 URL。

有没有办法找到一个特定请求的源文件？像 sent from filename.js on line 123 这样的东西是理想的，但只有文件名也会有很大帮助。

我可以浏览所有文件并单独尝试每个文件，但这似乎是在浪费大量时间。将有很多代码要经过。

Answer 1

如果您知道在应用程序中要做什么才能使请求发生，在 Chrome 中您可以使用 XHR 断点来捕获它:

1. 导航到您将要执行导致请求的操作的位置
2. 打开开发工具
3. 切换到“来源”标签
4. 在右侧，向下滚动到“XHR 断点”
5. 单击 + 按钮，填写 URL 的一些适当子集(或将其留空以在所有 XHR 上中断)
6. 添加它
7. 按照要求做事

Chrome 将中断并将您带到触发 XHR 的代码行。