browser.devtools.network

Opis

Użyj interfejsu API chrome.devtools.network, aby pobrać informacje o żądaniach sieciowych wyświetlanych przez Narzędzia dla programistów w panelu Sieć.

Informacje o żądaniach sieciowych są przedstawiane w formacie archiwum HTTP (HAR). Opis pliku HAR wykracza poza zakres tego dokumentu. Więcej informacji znajdziesz w specyfikacji pliku HAR w wersji 1.2.

W przypadku HAR metoda browser.devtools.network.getHAR() zwraca cały log HAR, a zdarzenie browser.devtools.network.onRequestFinished udostępnia wpis HAR jako argument wywołania zwrotnego zdarzenia.

Pamiętaj, że ze względu na wydajność treść żądania nie jest podawana w ramach HAR. Aby pobrać treść, możesz wywołać metodę getContent() żądania.

Jeśli okno Narzędzia dla programistów zostanie otwarte po wczytaniu strony, w tablicy wpisów zwracanych przez getHAR() może brakować niektórych żądań. Aby pobrać wszystkie żądania, załaduj ponownie stronę. Ogólnie lista żądań zwracanych przez getHAR() powinna odpowiadać liście wyświetlanej w panelu Sieć.

Ogólne wprowadzenie do korzystania z interfejsów API Narzędzi deweloperskich znajdziesz w podsumowaniu interfejsów API Narzędzi deweloperskich.

Plik manifestu

Aby używać tego interfejsu API, musisz zadeklarować te klucze w pliku manifestu.

"devtools_page"

Przykłady

Poniższy kod rejestruje adresy URL wszystkich obrazów o rozmiarze większym niż 40 KB podczas ich wczytywania:

browser.devtools.network.onRequestFinished.addListener(
  function(request) {
    if (request.response.bodySize > 40*1024) {
      browser.devtools.inspectedWindow.eval(
          'console.log("Large image: " + unescape("' +
          escape(request.request.url) + '"))');
    }
  }
);

Aby wypróbować ten interfejs API, zainstaluj przykłady interfejsu API narzędzi deweloperskich z repozytorium chrome-extension-samples.

Typy

Request

Reprezentuje żądanie sieciowe dotyczące zasobu dokumentu (skryptu, obrazu itp.). Więcej informacji znajdziesz w specyfikacji HAR.

Właściwości

  • getContent

    unieważnienie,

    Zwraca treść odpowiedzi.

    Funkcja getContent wygląda tak:

    () => {...}

    • returns

      Promise<object>

      Chrome 151 lub nowsza browser.* od Chrome 152

      Funkcja, która otrzymuje treść odpowiedzi po zakończeniu żądania.

Metody

getHAR()

browser.devtools.network.getHAR(): Promise<object>

Zwraca dziennik HAR zawierający wszystkie znane żądania sieciowe.

Zwroty

  • Promise<object>

    Chrome 151 lub nowsza browser.* od Chrome 152

    Funkcja, która otrzymuje dziennik HAR po zakończeniu żądania.

Wydarzenia

onNavigated

browser.devtools.network.onNavigated.addListener(
  callback: function,
)

Uruchamiane, gdy w sprawdzanym oknie następuje przejście na nową stronę.

Parametry

  • callback

    funkcja

    Parametr callback wygląda tak:

    (url: string) => void

    • URL

      tekst

onRequestFinished

browser.devtools.network.onRequestFinished.addListener(
  callback: function,
)

Uruchamiane, gdy żądanie sieciowe zostanie zakończone i wszystkie dane żądania będą dostępne.

Parametry

  • callback

    funkcja

    Parametr callback wygląda tak:

    (request: Request) => void