Question

我有一个页面在提交表单时发送XHR请求，并且我希望Chrome在收到回复时中断。似乎完成此操作的最佳方式是，如果Chrome有一个我可以调用的javascript函数，它会破坏执行，但到目前为止我一直无法找到类似的东西。还有其他解决方案吗？

修改：

我实际上没有为请求定义回调，因此我无法以这种方式设置断点。正在使用这行jquery代码发送请求：

$.post(this.action, $(this).serialize(), null, "script");

其中this是表单元素。 null参数是您通常定义回调但使用"script"参数的地方，原始javascript由服务器返回然后直接执行，因此它似乎是打破和单步执行代码的唯一方法是debugger;语句。这是有效的，但是当单步执行代码时，你实际上看不到你在哪一行，所以它有点尴尬。我怀疑这是Chrome调试工具的限制。

Answer 1

下拉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请求的方法。

Answer 2

您可以在成功回调中设置断点并逐步调试。设置断点：

打开“开发人员工具”，然后点击顶部的“脚本”标签。
选择包含AJAX请求成功回调的脚本。
单击要使用断点的左侧的行号。将显示一个蓝色箭头，表示已设置断点。
然后按原样发出AJAX请求，调试器将自动停在您设置的断点处。

或者，您可以使用debugger语句自动调用调试器。因此，您的成功回调可能如下所示：

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

还要检查这个不错的article以便调试JavaScript。

但是，第一种方法更好，因为它不需要您修改代码。

Answer 3

您也可以转到开发人员工具中的脚本选项卡，然后在右侧单击XHR断点并使用URL过滤添加新断点。

如果您使用jQuery，则在发生断点时，您可以使用CallStack查找名为jQuery.ajax的函数。

Answer 4

对我来说，解决方案是使用网络面板中的启动器选项卡，它向我展示了发送请求的脚本

Answer 5

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

ES5语法不应理解为ES5 +，主要是因为function extends class ...在运行时不起作用。类部分将以Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator失败。此时，您可以考虑更改：
Parent.apply(this, arguments);
进入
super(...arguments);

注释02

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

注释03

上述代码不适用于ES5，尤其是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方法。不太好，嗯！？

就是这样！

在Chrome中的XHR中设置断点

5 个答案:

ES6 +

ES5

ES5 +