如何使用 JavaScript 在 Chrome 的控制台中存储“XHR 完成加载”消息？答案

【问题标题】：How do I use JavaScript to store "XHR finished loading" messages in the console in Chrome?如何使用 JavaScript 在 Chrome 的控制台中存储“XHR 完成加载”消息？
【发布时间】：2017-09-03 02:52:01
【问题描述】：

我正在寻找一种方法来使用 JavaScript 来存储在执行 xmlhttprequests 时出现在 Chrome 控制台中的调试消息。下面提供的示例输出：

提前致谢！

【问题讨论】：

您是否只想在每次 XHR 加载完成时执行一些操作，例如 jQuery 的 .ajaxComplete？还是出于调试原因，您想保留日志信息？
我相信第二个选项是我需要的。我想跟踪控制台输出的 URL，但如您所见，前两行中的 XHR GET 事件属于不同的 HTML，并且由于 CORS 而无法访问。我要做的就是检索 URL 字符串并将其存储在 JavaScript 中。

标签： javascript google-chrome xmlhttprequest

【解决方案1】：

您无法从 JavaScript 读取控制台消息。您将无法阅读这些消息。

但是，使用与 John Culviner 对 Add a “hook” to all AJAX requests on a page 的回答相同的一般概念，您可以检测 JavaScript 中导致这些消息出现的事件。

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url) {
        this.addEventListener('load', function() {
            console.log('XHR finished loading', method, url);
        });

        this.addEventListener('error', function() {
            console.log('XHR errored out', method, url);
        });
        origOpen.apply(this, arguments);
    };
})();

这将使用一个新函数覆盖每个 XHR 对象的 open 方法，该函数将 load 和 error 侦听器添加到 XHR 请求。当请求完成或出错时，函数可以访问与open 方法一起使用的method 和url 变量。

如果您愿意，您可以使用method 和url 做一些更有用的事情，而不是简单地将它们传递给console.log。

【讨论】：

【解决方案2】：

可能重复How to read from Chrome's console in JavaScript

【讨论】：

我怀疑这个问题与该问题的重复并没有很好地对齐，因为这个问题询问与 JS 可见事件直接相关的控制台日志记录的子集。也就是说，这里的答案可能是“覆盖XMLHttpRequest.prototype.send 以将load 侦听器绑定到所有XHR 对象”，而这不是读取控制台输出的一般问题的答案。它更有可能与Add a “hook” to all AJAX requests on a page 重复，但如果没有 OP 的进一步澄清，我无法确定
我认为关于这个问题真正想要什么的信息不足。绝对不可能访问浏览器的控制台。如果他/她想用基本的事件监听器捕捉他所拥有的事件
@TypedSource 我想检索由 html 资源调用的 URL。它来自不同的主机，因此也存在 CORS 限制。
控制台有跟踪功能。但从外面你不能访问这是想想。