在 Chrome 中的 XHR 中设置断点

Posted 2023-02-22

【中文标题】在 Chrome 中的 XHR 中设置断点

【英文标题】：Set a breakpoint in XHR in Chrome

【发布时间】：2011-03-16 01:10:57

【问题描述】：

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

编辑：

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

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

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

【问题讨论】：

我不明白。如果您将回调设为空，所有响应都不会被忽略吗？您希望调试器在哪里中断？

【参考方案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请求的方法。

【讨论】：

xhr = new XMLHttpRequest Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at new XMLHttpRequest (<anonymous>:2:48) at <anonymous>:1:7

【参考方案2】：

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

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

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

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

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

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

【讨论】：

感谢您深思熟虑的回答。调试器语句肯定让我更接近了。我编辑了我的问题以澄清我实际上没有定义回调函数，因此使用调试器设置断点似乎是唯一的选择。

【参考方案3】：

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

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

【参考方案4】：

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

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

就是这样！