在 Chrome 中的 XHR 中设置断点

Question

我有一个页面在提交表单时发送 XHR 请求，我想让 Chrome 在收到响应时中断。实现这一点的最好方法似乎是 Chrome 有一个我可以调用的 javascript 函数来中断执行，但到目前为止我一直找不到类似的东西。还有其他解决方案吗？

编辑：

我实际上没有为请求定义回调，所以我不能那样设置断点。 请求正在使用这行 jquery 代码发送：

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

其中this 是一个表单元素。 null 参数是您通常定义回调的地方，但使用 "script" 参数时，服务器会返回原始 javascript，然后直接执行，因此中断和单步执行代码的唯一方法似乎是使用 @ 987654325@ 声明。这行得通，但是在单步执行代码时，您实际上无法看到您在哪一行，所以有点尴尬。我怀疑这是 Chrome 调试工具的限制。

Answer 1

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

Answer 2

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 方法。不太好，嗯！？

就是这样！

Answer 3

下拉 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 4

您也可以在开发者工具中进入脚本选项卡，然后在右侧单击 XHR 断点并使用 url 过滤添加新断点。

如果你使用jQuery，当断点发生时你可以使用CallStack来找到你调用jQuery.ajax的函数。

Answer 5

您可以在成功回调中设置断点并单步执行调试器。设置断点：

1. 打开“开发者工具”，然后点击顶部的“脚本”标签。
2. 为您的 AJAX 请求选择包含成功回调的脚本。
3. 单击左侧要设置断点的行号。将显示一个蓝色箭头，指示已设置断点。
4. 然后按照你的方式发出 AJAX 请求，调试器会在你设置的断点处自动停止。

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

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

还可以查看这个不错的 article 以调试 JavaScript。

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