[英]Set a breakpoint in XHR in Chrome
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.我有一个页面在提交表单时发送 XHR 请求,我想让 Chrome 在收到响应时中断。 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.
完成此操作的最佳方法似乎是,如果 Chrome 有一个 8822996504788 function,我可以调用它来中断执行,但到目前为止我一直无法找到类似的东西。 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:
请求是用这行 jquery 代码发送的:
$.post(this.action, $(this).serialize(), null, "script");
where this
is a form element. this
是一个表单元素。 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;
null
参数是您通常定义回调的地方,但使用"script"
参数时,原始 javascript 由服务器返回然后直接执行,因此看来中断和逐步执行代码的唯一方法是使用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.
我怀疑这是 Chrome 调试工具的局限性。
drop down the chrome console (ctrl+shift+j) and type any of these:下拉 chrome 控制台 (ctrl+shift+j) 并输入以下任何内容:
Just rewrite the jquery ajax:只需重写jquery ajax:
var prevajax = jQuery.ajax;
jQuery.ajax = function () { debugger; return prevajax.apply(jQuery, arguments); };
or if you are not using jQuery, rewrite the xhr class:或者,如果您不使用 jQuery,请重写 xhr 类:
var prevxhr = XMLHttpRequest;
XMLHttpRequest = function (){debugger; prevxhr.apply(this, arguments);};
After it breaks, just press shift+f11 until you find the method which initiates the ajax request.中断后,只需按 shift+f11 直到找到发起 ajax 请求的方法。
You can just set a breakpoint in the success callback and step through the debugger.您可以在成功回调中设置断点并逐步调试调试器。 To set a breakpoint:
要设置断点:
Alternatively, you can use the debugger
statement to automatically invoke the debugger.或者,您可以使用
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.还可以查看这篇用于调试 JavaScript 的好文章。
However, the first approach is better as it doesn't require you to modify your code.但是,第一种方法更好,因为它不需要您修改代码。
You can also go to scripts tab in developer tool, and on the right side you click on XHR Breakpoints and add new breakpoint with url filtering.您还可以转到开发人员工具中的脚本选项卡,然后在右侧单击 XHR Breakpoints 并添加带有 url 过滤的新断点。
If you use jQuery
, when breakpoint occurs you can use CallStack
to find your function that called jQuery.ajax
.如果您使用
jQuery
,当断点发生时,您可以使用CallStack
找到调用jQuery.ajax
的函数。
XMLHttpRequest = (Parent =>
class XMLHttpRequest extends Parent {
constructor() {
const onload = () => {
this.removeEventListener('load', onload);
debugger;
};
super(...arguments);
this.addEventListener('load', onload);
}
}
)(XMLHttpRequest);
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);
This should let you inspect the request/response in the Network developer tool.这应该让您检查网络开发人员工具中的请求/响应。
Note 01注01
ES5 syntax IS NOT to be understood as ES5+ mainly because
function extends class ...
isn't something that works at runtime.ES5 语法不能被理解为 ES5+,主要是因为
function extends class ...
不是在运行时工作的东西。 The class part will fail withUncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator
.类部分将失败,出现
Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator
。 At that point, you may consider changing :那时,您可以考虑更改:
Parent.apply(this, arguments);
into
进入
super(...arguments);
Note 02注02
Every solution here supposes that the library that issue the XHR request did not cache the
XMLHttpRequest
constructor [yet].这里的每个解决方案都假设发出 XHR 请求的库[尚未]缓存
XMLHttpRequest
构造函数。
Note 03注03
The above code does not work with ES5 especially b/c of
supper
vs..prototype
inheritance syntax.上面的代码不适用于 ES5,尤其是 b/c of
supper
vs..prototype
继承语法。
In order to circumvent thes issues, one may tap into the prototype.为了规避这些问题,可以利用原型。 In the following code, I choosed to tap into the the
xhr.send
method.在下面的代码中,我选择使用
xhr.send
方法。
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);
That said, the latter code didn't work for the issue that had me dig into this... Mainly because the internal Angular code registered an event listener (that fully redirects the browser) before even calling the
xhr.send
method.也就是说,后一个代码对让我深入研究的问题不起作用......主要是因为内部 Angular 代码在调用
xhr.send
方法之前注册了一个事件侦听器(完全重定向浏览器) 。 Not great, eh !?不太好,嗯!?
That's it!而已!
对我来说,解决方案是使用 Network 面板中的 Initiator 选项卡,它向我展示了发送请求的脚本
Since this question was asked (in 2010) chrome has added support for breakpoints on xhr (ajax, fetch).自从(2010 年)提出这个问题以来,chrome 添加了对 xhr(ajax、fetch)断点的支持。 You can specify a substring for the url to set a conditional xhr breakpoint.
可以为url指定一个substring来设置条件xhr断点。
https://developer.chrome.com/docs/devtools/javascript/breakpoints/#xhr https://developer.chrome.com/docs/devtools/javascript/breakpoints/#xhr
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.