下拉chrome控制台（ctrl+shift+j）并键入以下任意一项：
只需重写jquery AJAX ：

var prevajax = jQuery.ajax;
jQuery.ajax = function () { debugger; return prevajax.apply(jQuery, arguments); };

或者，如果您没有使用jQuery，请重写xhr类：

var prevxhr = XMLHttpRequest;
XMLHttpRequest = function (){debugger; prevxhr.apply(this, arguments);};

在它中断后，只需按shift+f11，直到找到启动 AJAX 请求的方法。

您可以只在成功回调中设置断点并单步调试调试器。要设置断点：
1.打开“开发人员工具”，然后单击顶部的“脚本”选项卡。
1.选择包含 AJAX 请求成功回调的脚本。
1.单击左手要设置断点的行号。将显示一个蓝色箭头，指示断点已设置。
1.然后按照您的意愿发出 AJAX 请求，调试器将自动在您设置的断点处停止。
或者，您可以使用debugger语句自动调用调试器。因此，使用此语句，您的成功回调可能如下所示：

success: function(data, textStatus, request) {
    debugger; // pause execution and opens debugger at this point
    ...
}

还可以使用这个不错的article来调试JavaScript。
但是，第一种方法更好，因为它不需要修改代码。

你也可以在开发者工具中进入脚本选项卡，在右边点击XHR断点，然后添加带有url过滤的新断点。
如果使用jQuery，则当断点发生时，可以使用CallStack查找调用jQuery.ajax的函数。

对我来说，解决方案是使用“Network”面板中的“Initiator”选项卡，它显示了发送请求的脚本

ES6+

XMLHttpRequest = (Parent =>
    class XMLHttpRequest extends Parent {
        constructor() {
            const onload = () => {
                this.removeEventListener('load', onload);
                debugger;
            };
            super(...arguments);
            this.addEventListener('load', onload);
        }
    }
)(XMLHttpRequest);

ES5

XMLHttpRequest = (function (Parent) {
    XMLHttpRequest.prototype = Parent;

    return XMLHttpRequest;

    function XMLHttpRequest() {
        var self = this;
        Parent.apply(this, arguments);
        this.addEventListener('load', function () {
            self.removeEventListener('load', onload);
            debugger;
        });
    }
})(XMLHttpRequest);

这将允许您在 Network 开发人员工具中检查请求/响应。

注01

ES 5语法不能理解为ES 5+语法，主要是因为function extends class ...在运行时不起作用。类部分将因Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator而失败。此时，您可以考虑更改：

Parent.apply(this, arguments);

变成

super(...arguments);

附注02

这里的每个解决方案都假设发出XHR请求的库[还]没有缓存XMLHttpRequest构造函数。

附注03

上述代码不适用于ES 5，尤其是supper与.prototype继承语法的b/c。
为了避免这些问题，可以使用原型，在下面的代码中，我选择使用xhr.send方法。

ES5+

XMLHttpRequest.prototype.send = (function (send) {
    return function () {
        this.addEventListener('load', function onload() {
            this.removeEventListener('load', onload);
            debugger;
        });

        return send.apply(this, arguments);
    };
})(XMLHttpRequest.prototype.send);

也就是说，后一段代码并不能解决让我深入研究的问题......主要是因为内部的Angular代码在调用xhr.send方法之前注册了一个事件监听器 （完全重定向浏览器）。
就是这样！

自从2010年这个问题被提出以来，chrome已经增加了对xhr断点的支持（ AJAX ，fetch），你可以为url指定一个子字符串来设置一个有条件的xhr断点。

https://developer.chrome.com/docs/devtools/javascript/breakpoints/#xhr