Javascript 如何仅捕获Devtools扩展上的XHR请求？

在过去的几天里，我们一直在尝试开发一个Devtools扩展，它只能拦截XHR请求。我们可以在普通扩展上使用chrome.webRequest API，但在Devtools扩展面板上不可能。我们试图使用devtools.network，但它捕获所有请求

有没有办法只捕获XHR请求

提前感谢。

您可以使用API获取HAR，然后确定请求是否为XHR，并过滤输出

我不完全确定DevTools是如何确定这一点的，但在发出AJAX请求时（通常）会发送头。它是一个非标准的，但被广泛使用。您可以在HAR中检查

XMLHttpRequest

值

这可能无法捕获所有请求，并且可能还有其他一些数据DevTools使用，但我创建了一个小片段，它将根据此头过滤HAR

chrome.devtools.network.getHAR(function(result) {
    var entries = result.entries;
    var xhrEntries = entries.filter(function(entry) {
        var headers = entry.request.headers;

        var xhrHeader = headers.filter(function(header) {
            return header.name.toLowerCase() === 'x-requested-with' 
                && header.value === 'XMLHttpRequest';
        });

        return xhrHeader.length > 0;

    });

    console.log(xhrEntries);
});

---

注意。您可以使用

chrome.devtools.network.onRequestFinished

事件，按照每个请求以相同的方式访问HAR数据

谢谢你的快速回复！不幸的是，问题是我们已经在很多网站上进行了测试，大多数网站都没有使用X-request-With头。尽管如此，考虑到这个问题，您的解决方案工作得很好，如果没有其他方法，我们可能会继续使用它。@BrunoSantos我已经在一个小组中询问了DevTools是如何完成这个过滤器的，所以我会看看是否有人回来提供有用的东西。我认为他们可能在XHR对象上做了一些插装，以标记请求类型，而不是任何与服务器相关的内容。这是他们实现目标的一种方式，但我们会看到的。非常感谢！让我不断更新，如果在此期间我发现一些有用的东西，我会在这里分享。这就是我做这件事的方式