在 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 识别的断点?