Как я могу уловить только запросы XHR на расширение Devtools?

Question

В течение последних дней мы пытались разработать расширение Devtools, которое могло бы перехватывать только запросы XHR. Мы можем использовать API chrome.webRequest для обычного расширения, но это невозможно на панели расширения Devtools. Мы попытались использовать devtools.network, но он ловит все запросы.

Есть ли способ поймать только запросы XHR?

Заранее спасибо.

Answer 1

Вы можете использовать API chrome.devtools.network для получения HAR, а затем вы можете определить, является ли запрос XHR или нет, фильтруя выход.

Я не совсем уверен, как DevTools определяет это, но заголовок X-Requested-With (обычно) отправляется при выполнении запросов AJAX. Это нестандартное, но широко используется. Вы можете проверить значение XMLHttpRequest в HAR.

Возможно, это не улавливает все запросы, и могут быть некоторые другие данные, которые использует 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 так же, как и каждый запрос, по завершении, используя событие chrome.devtools.network.onRequestFinished.