使用 chrome 开发工具在代码中查找 http 请求的位置答案

【问题标题】：find where in the code an http request was made using chrome dev tools使用 chrome 开发工具在代码中查找 http 请求的位置
【发布时间】：2017-05-18 00:59:34
【问题描述】：

有没有办法使用 chrome 开发工具来查找 http 请求 (ajax) 的发出位置？我有一个大型项目，许多请求发生在不同的文件中。我希望能够检查一个特定的请求，我在“网络”选项卡上找到了它，但似乎没有任何方法可以找到该请求在代码中的哪个位置开始。

【问题讨论】：

如果使用$.ajax，则启动器列将始终为jquery.min.js#1。我想 DevTools 使用 xhr.send() 使用的行报告脚本。
网络标签的发起者列。
如果你有某种常见的 AJAX 功能，你可以使用调试 console.log() 来利用 arguments.caller

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

使用 Network 面板中的 Initiator 列。单击 Initiator 单元格中的链接会将您带到发出请求的代码行。

如果看不到，请右键单击表头并选择Initiator。

您还可以在将鼠标悬停在资源上时按住 Shift 以查看它的发起者。启动器是绿色的。依赖项是红色的。如果你看不到发起者，那么它目前在桌子上不可见（可能更高，被过滤掉等）

MacPrawn's XHR Breakpoint idea 也是一个好方法。

【讨论】：

initiator栏目只显示Other是什么意思？

【解决方案2】：

由于您在“网络”窗格中看到了正在发出的请求，因此您可以获取该 URL，然后在该 URL 上添加一个 XHR 断点：

（在“源”窗格右侧的断点面板中）

希望这会有所帮助！

【讨论】：