在Chrome中设置XHR中的断点 [英] Set a breakpoint in XHR in Chrome

问题描述

我有一个页面在提交表单时发送XHR请求，我希望Chrome在收到回复时中断。这似乎是最好的方式来实现这一点，如果Chrome有一个JavaScript函数，我可以打电话，打破执行，但我一直无法找到类似的东西。是否还有其他解决方案？

编辑： 我实际上没有为请求定义的回调，所以我不能以这种方式设置断点。
这个请求是用这行jQuery代码发送的：

  $。post（this.action，$（ this）.serialize（），null，script）; 
  

其中这个是一个表单元素。 null 参数是您通常定义回调的地方，但是使用script参数，服务器然后直接执行，因此似乎破解和逐步执行代码的唯一方法是使用调试器; 语句。这是有效的，但是在逐步完成代码时，你实际上看不到你在哪条线上，所以它有点尴尬。我怀疑这是Chrome调试工具的限制。

解决方案

您可以在成功回调中设置断点并逐步调试。要设置断点，请执行以下操作：

1. 打开开发工具，然后单击顶部的脚本选项卡。 $ b
2. 选择包含您的AJAX请求成功回调的脚本。


3. 单击想要断点的左侧的行号。将出现一个蓝色箭头，指示已设置断点。然后按照您的要求创建AJAX请求，并且调试器将自动停止在您设置的断点处。

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

  success：function（data，textStatus，request）{
 debugger ; //暂停执行，并在此时打开调试器
 ... 
} 
  

还可以查看这个漂亮的文章来调试JavaScript。

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

I have a page that sends an XHR request when a form is submitted and I would like to get Chrome to break when it receives a response. It seems like the best way to accomplish this would be if Chrome has a javascript function that I can call that breaks execution but I've been unable to find anything like that so far. Is there another solution?

Edit:

I don't actually have a callback defined for the request so I can't set a breakpoint that way. The request is being sent with this line of jquery code:

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

where this is a form element. The null argument is where you would usually define a callback but with the "script" argument, raw javascript is returned by the server and then directly executed, so it seems the only way to break and step through the code is with the debugger; statement. This works, but when stepping through the code you can't actually see which line you are on so its a little awkward. I suspect that this is a limitation of Chrome's debugging tools.

解决方案

You can just set a breakpoint in the success callback and step through the debugger. To set a breakpoint:

1. Open "Developer Tools", and click the "Scripts" tab on the top.
2. Select the script that contains the success callback for your AJAX request.
3. Click the line number on the left hand side where you want the breakpoint. A blue arrow will show up indicating the breakpoint has been set.
4. Then make the AJAX request as you would, and the debugger will automatically stop at the breakpoint you set.

Alternatively, you can use the debugger statement to automatically invoke the debugger. So with this your success callback may look like:

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

Also checkout this nice article for debugging JavaScript.

However, the first approach is better as it doesn't require you to modify your code.

这篇关于在Chrome中设置XHR中的断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！