在 Chrome 中的 XHR 中设置断点

Posted

技术标签:

【中文标题】在 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】:

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

【讨论】:

【参考方案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 方法。不太好,嗯!?

就是这样!

【讨论】:

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

【讨论】:

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【参考方案4】:

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

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

【讨论】:

【参考方案5】:

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

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

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

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

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

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

【讨论】:

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

以上是关于在 Chrome 中的 XHR 中设置断点的主要内容,如果未能解决你的问题,请参考以下文章

不能总是在 Chrome 中设置 React Native 断点

已解决在 Visual Studio 中设置 JavaScript/TypeScript 的断点 脚本出现自动中断错误

使用 Gulp 时如何在 IDEA 中设置 Chrome 识别的断点?

如何在 Google Chrome 的内联 Javascript 中设置断点?

无法在 Chrome DevTools 中设置所需的断点?

如何在 Google Chrome DevTools 的 lambda 调用中设置断点?