Devtools ExtensionでXHR要求のみを取得する方法はありますか？

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); 
}); 

注意。 イベントを使用して、要求が完了したときと同じ方法でHARデータにアクセスできます。