Javascript 在Chrome中的XHR中设置断点

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

编辑：

我实际上没有为请求定义回调，所以我不能这样设置断点。 请求将与以下jquery代码行一起发送：

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

---

其中

这是一个表单元素。
null
参数通常是定义回调的地方，但是使用
“script”
参数，服务器返回原始javascript，然后直接执行，因此似乎只有使用
调试器才能中断并逐步执行代码语句。这是可行的，但是当你在代码中单步走的时候，你实际上看不到你在哪一行，所以有点尴尬。我怀疑这是Chrome调试工具的局限性
 您只需在成功回调中设置一个断点，然后逐步执行调试器。要设置断点，请执行以下操作：

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

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

还可以检查这个用于调试JavaScript的好方法

但是，第一种方法更好，因为它不需要您修改代码。
您也可以转到开发人员工具中的“脚本”选项卡，在右侧单击XHR断点并添加带有url筛选的新断点

如果您使用
jQuery
，当出现断点时，您可以使用
CallStack
查找调用
jQuery.ajax的函数。ajax
下拉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请求的方法。
ES6+
XMLHttpRequest=（父级=>
类XMLHttpRequest扩展了父类{
构造函数（）{
const onload=（）=>{
此.removeEventListener（'load'，onload）；
调试器；
};
超级（…参数）；
此.addEventListener（'load'，onload）；
}
}
)（XMLHttpRequest）；

ES5
XMLHttpRequest=（函数（父函数）{
XMLHttpRequest.prototype=父级；
返回XMLHttpRequest；
函数XMLHttpRequest（）{
var self=这个；
Parent.apply（这个，参数）；
this.addEventListener（'load'，function（）{
self.removeEventListener（“加载”，onload）；
调试器；
});
}
})（XMLHttpRequest）；

这应该允许您在NetworkDeveloper工具中检查请求/响应

注01

ES5语法不能理解为ES5+，主要是因为
函数扩展类…
在运行时不起作用。类部分将失败，原因是
未捕获类型错误：未能构造“XMLHttpRequest”：请使用“new”运算符。在这一点上，你可以考虑改变：

Parent.apply（这个，参数）；

进入

super（…参数）；

注02

这里的每个解决方案都假设发出XHR请求的库没有缓存
XMLHttpRequest
构造函数[还没有]

注03

上述代码不适用于ES5，尤其是
super
的b/c与
原型
继承语法

为了规避这些问题，可以利用原型。在下面的代码中，我选择点击
xhr.send
方法

ES5+
XMLHttpRequest.prototype.send=（函数（send）{
返回函数（）{
this.addEventListener（'load'，函数onload（）{
此.removeEventListener（'load'，onload）；
调试器；
});
返回send.apply（此参数为参数）；
};
})（XMLHttpRequest.prototype.send）；

也就是说，后一个代码不适用于让我深入研究的问题。。。主要是因为内部Angular代码在调用
xhr.send
方法之前注册了一个事件侦听器（完全重定向浏览器）。不太好，嗯

就这样
 谢谢你深思熟虑的回答。调试器语句确实让我更接近了。我编辑了我的问题，以澄清我实际上没有定义回调函数，所以使用调试器设置断点似乎是唯一的选择。我不明白。如果您将回调设为null，那么所有响应不是都会被忽略吗？您希望调试器在何处中断？
xhr=new-XMLHttpRequest
Uncaught-TypeError:构造“XMLHttpRequest”失败：请使用“new”运算符，此DOM对象构造函数不能作为函数调用。在新的XMLHttpRequest（：2:48）at:1:7