调试 AJAX 时，Chrome 仅在调用堆栈中显示库行答案

【问题标题】：Chrome only shows Library lines in call stack when debuggin AJAX调试 AJAX 时，Chrome 仅在调用堆栈中显示库行
【发布时间】：2016-07-23 14:53:39
【问题描述】：

我已将“XHR 断点”设置为在“任何 XHR”上中断以查找，哪一行触发 AJAX 请求，但是当我检查调用堆栈时 - 所有行都是 Angular.js 库行。这没有任何意义，因为这样我就找不到代码中的哪一行触发了请求。我该怎么办？

更多信息：

如果这很重要，则 AJAX 响应是错误的，因为它请求的 URL 不存在。
此外，当我黑盒 Angular - 断点不会触发。

【问题讨论】：

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

【解决方案1】：

Angular 不会立即发出 Ajax 请求。相反，它会将其排队，直到摘要完成。

您可以通过拦截 $http.get 方法或您用于发出请求的任何方法来找到导致请求的代码。

debugCall($http, "get"); // put this somewhere where it's only called once

function debugCall(object, methodName){
    var originalMethod = object[methodName];
    object[methodName] = function(){
         debugger;
         originalMethod.apply(this, arguments)
    }
}

您还可以查看 Angular 调用堆栈并尝试从那里获得提示。例如，在this demo 中，调用堆栈中的第一个函数称为eventHandler。

如果您转到该调用框架并在控制台中运行event.target.outerHTML，您会得到<button ng-click="doXhr()">Do XHR 2</button>。这样您就可以很好地了解在哪里查找请求。

【讨论】：

很好地了解 Angular 的工作原理。关于拦截 $http 方法，问题是我找不到它，这就是为什么我开始使用调试器寻找它的原因。当然我可以浏览代码，只是想使用调试器让它更快。
@naneri 不确定我理解是什么阻止你拦截它。您只需在应用程序的任何位置覆盖一次$http.get 函数。一旦完成，无论在哪里使用$http.get，它都会暂停。