在Chrome中的XHR中设置断点

sxissh06 于 2023-01-28 发布在 Go

关注(0)|答案(6)|浏览(428)

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

- 编辑**：

实际上我没有为请求定义回调函数，所以我不能用这种方式设置断点。请求是用下面这行jquery代码发送的：

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

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

google-chrome

来源：https://stackoverflow.com/questions/3249696/set-a-breakpoint-in-xhr-in-chrome

6条答案

按热度按时间

wljmcqd81#

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

赞(0）回复(0）举报 2023-01-28

pkbketx92#

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

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

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

赞(0）回复(0）举报 2023-01-28

ne5o7dgx3#

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

赞(0）回复(0）举报 2023-01-28

bxjv4tth4#

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

赞(0）回复(0）举报 2023-01-28

cwtwac6a5#

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方法之前注册了一个事件监听器 （完全重定向浏览器）。
就是这样！

赞(0）回复(0）举报 2023-01-28

i34xakig6#

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