chrome.devtools.network

Opis

Interfejs API chrome.devtools.network umożliwia pobieranie informacji o żądaniach sieciowych wyświetlanych przez narzędzia dla programistów w panelu Sieć.

Plik manifestu

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

"devtools_page"

Zapoznaj się z podsumowaniem interfejsów API Narzędzi deweloperskich, aby uzyskać ogólne wprowadzenie do korzystania z interfejsów API narzędzi dla programistów.

Omówienie

Informacje o żądaniach sieciowych są zapisywane w formacie HAR (archiwum HTTP). Opis HAR nie wykracza poza zakres tego dokumentu. Zapoznaj się ze specyfikacją HAR w wersji 1.2.

W przypadku plików HAR metoda chrome.devtools.network.getHAR() zwraca cały dziennik HAR, a Zdarzenie chrome.devtools.network.onRequestFinished dostarcza wpis HAR jako argument zdarzenia. oddzwanianie.

Pamiętaj, że ze względów wydajności treść żądania nie jest częścią pliku HAR. Możesz zadzwonić pod numer metody getContent() żądania, aby pobrać treści.

Jeśli po załadowaniu strony otworzy się okno Narzędzia dla deweloperów, w sekcji może brakować niektórych żądań tablicę wpisów zwróconych przez funkcję getHAR(). Załaduj ponownie stronę, aby pobrać wszystkie żądania. Ogólnie rzecz biorąc, lista żądań zwróconych przez funkcję getHAR() powinna odpowiadać liście wyświetlanej w panelu Sieć.

Przykłady

Ten kod rejestruje adresy URL wszystkich wczytywanych obrazów przekraczających 40 KB:

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

Aby wypróbować ten interfejs API, zainstaluj przykłady interfejsu API devtools ze strony chrome-extension-samples. z repozytorium.

Typy

Request

Reprezentuje żądanie sieciowe dotyczące zasobu dokumentu (skryptu, obrazu itp.). Zobacz specyfikację HAR.

Właściwości

  • getContent

    nieważne

    Zwraca treść odpowiedzi.

    Funkcja getContent wygląda tak: 

    (callback: function) => {...}

    • wywołanie zwrotne

      funkcja

      Parametr callback wygląda tak: 

      (content: string, encoding: string) => void

      • treść

        ciąg znaków

        Zawartość treści odpowiedzi (potencjalnie zakodowana).

      • kodowanie

        ciąg znaków

        Pusta, jeśli treść nie jest zakodowana. W przeciwnym razie nazwa kodowania. Obecnie obsługiwany jest tylko format base64.

Metody

getHAR()

chrome.devtools.network.getHAR(
  callback: function,
)

Zwraca dziennik HAR, który zawiera wszystkie znane żądania sieciowe.

Parametry

  • wywołanie zwrotne

    funkcja

    Parametr callback wygląda tak: 

    (harLog: object) => void

    • harLog

      Obiekt

      Dziennik HAR. Aby dowiedzieć się więcej, zapoznaj się ze specyfikacją HAR.

Wydarzenia

onNavigated

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

Uruchamiane, gdy sprawdzane okno przechodzi do nowej strony.

Parametry

  • wywołanie zwrotne

    funkcja

    Parametr callback wygląda tak: 

    (url: string) => void

    • URL

      ciąg znaków

onRequestFinished

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

Uruchamiane po zakończeniu żądania sieciowego i dostępności wszystkich danych żądania.

Parametry

  • wywołanie zwrotne

    funkcja

    Parametr callback wygląda tak: 

    (request: Request) => void