在Chrome中的XHR中设置断点

Question

我有一个页面在提交表单时发送XHR请求,并且我希望Chrome在收到回复时中断.似乎完成此操作的最佳方式是,如果Chrome有一个我可以调用的javascript函数,它会破坏执行,但到目前为止我一直无法找到类似的东西.还有其他解决方案吗？

编辑:

我实际上没有为请求定义回调,所以我不能这样设置断点.使用这行jquery代码发送请求:

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

哪里this是表单元素.该null论点是,你通常会定义一个回调,但与"script"论证,生JavaScript是由服务器返回,然后直接执行的,所以它似乎打破和单步执行代码与唯一的方法debugger;声明.这是有效的,但是当单步执行代码时,你实际上看不到你在哪一行,所以它有点尴尬.我怀疑这是Chrome调试工具的限制.

Answer 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请求的方法.

Answer 2

您只需在成功回调中设置断点并逐步调试.设置断点:

1. 打开"开发人员工具",然后单击顶部的"脚本"选项卡.
2. 选择包含AJAX请求成功回调的脚本.
3. 单击要使用断点的左侧的行号.将显示一个蓝色箭头,表示已设置断点.
4. 然后按原样发出AJAX请求,调试器将自动停在您设置的断点处.

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

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

另外,请查看这篇用于调试JavaScript的好文章.

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

Answer 3

您还可以转到开发人员工具中的脚本选项卡,然后在右侧单击XHR断点并使用URL过滤添加新断点.

如果使用jQuery,当发生断点时,您可以使用CallStack查找调用的函数jQuery.ajax.