Question

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

有没有办法只捕获XHR请求？

提前致谢。

Answer 1

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

我不完全确定DevTools如何确定这一点，但是（通常）在发出AJAX请求时发送X-Requested-With标头。它是非标准的，但被广泛使用。您可以检查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数据。

我怎样才能捕获Devtools扩展上的XHR请求？

1 个答案: