如何才能捕獲Devtools Extension上的XHR請求？

過去幾天，我們一直在努力開發一種Devtools擴展，它可以攔截XHR請求。我們可以在普通擴展上使用chrome.webRequest API，但這在Devtools擴展面板上是不可行的。我們嘗試使用devtools.network，但它捕獲所有請求。如何才能捕獲Devtools Extension上的XHR請求？

有沒有辦法只捕捉XHR請求？

在此先感謝。

來源

2017-02-21 Bruno Santos

您可以使用chrome.devtools.network API獲取HAR，然後您可以確定請求是否爲XHR，並過濾輸出。

我不完全確定DevTools如何確定這一點，但X-Requested-With頭部（通常）在發出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數據。

來源

2017-02-22 00:57:31

感謝您的快速響應！不幸的是，問題在於我們已經在很多網站進行了測試，其中大多數網站並未使用X-Requested-With標頭。儘管如此，考慮到這個問題，你的解決方案完美地工作，如果沒有其他方式，我們可能會去用它。 –

@BrunoSantos我問過一羣關於DevTools如何完成這個過濾器的問題，所以我會看看是否有人回來使用任何有用的東西。我想也許他們可能會在XHR對象上做一些檢測來標記請求類型，而不是與服務器相關的任何東西。這是他們可以實現的一種方式，但會看到。 –

非常感謝！讓我更新，如果在此期間我找到一些有用的東西，我會在這裏分享。 –

如何才能捕獲Devtools Extension上的XHR請求？

回答

相關問題