chrome.devtools.network

Opis

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

Plik manifestu

Aby korzystać z tego interfejsu API, w pliku manifestu musisz zadeklarować te klucze.

"devtools_page"

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

Przegląd

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

W przypadku formatu HAR metoda chrome.devtools.network.getHAR() zwraca cały dziennik HAR, a chrome.devtools.network.onRequestFinished zdarzenie przekazuje wpis HAR jako argument do wywołania zwrotnego zdarzenia.

Pamiętaj, że ze względów wydajnościowych treść żądania nie jest uwzględniana w formacie HAR. Aby pobrać treść, możesz wywołać metodę getContent() żądania.

Jeśli okno Narzędzi dla programistów zostanie otwarte po wczytaniu strony, niektóre żądania mogą nie być uwzględnione w tablicy wpisów zwracanej przez getHAR(). Aby uzyskać wszystkie żądania, odśwież stronę. Ogólnie rzecz biorąc, lista żądań zwracana przez getHAR() powinna być zgodna z listą wyświetlaną w panelu Sieć.

Przykłady

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

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 Narzędzi dla programistów z repozytorium chrome-extension-samples.

Typy

Request

Reprezentuje żądanie sieciowe zasobu dokumentu (skryptu, obrazu itp.). Informacje referencyjne znajdziesz w specyfikacji HAR.

Właściwości

  • getContent

    void

    Promise

    Zwraca treść treści odpowiedzi.

    Funkcja getContent wygląda tak: 

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

    • callback

      function optional

      Parametr callback wygląda tak: 

      (response: object) => void

      • response

        object

        Oczekuje

        Obiekt zawierający treść odpowiedzi i jej kodowanie.

        • content

          ciąg znaków

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

        • encoding

          ciąg znaków

          Pusty, jeśli treść nie jest zakodowana, w przeciwnym razie nazwa kodowania. Obecnie obsługiwane jest tylko kodowanie base64.

    • returns

      Promise<object>

      Oczekuje

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

      Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach trzeba używać wywołań zwrotnych.

Metody

getHAR()

Promise 
chrome.devtools.network.getHAR(
  callback?: function,
): Promise<object>

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

Parametry

  • callback

    function optional

    Parametr callback wygląda tak: 

    (harLog: object) => void

    • harLog

      object

      Dziennik HAR. Szczegółowe informacje znajdziesz w specyfikacji HAR.

Zwroty

  • Promise<object>

    Oczekuje

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

    Obietnice są obsługiwane tylko w przypadku platformy Manifest V3 i nowszych. Na innych platformach trzeba używać wywołań zwrotnych.

Wydarzenia

onNavigated

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

Uruchamiane, gdy sprawdzane okno przechodzi na nową stronę.

Parametry

  • callback

    funkcja

    Parametr callback wygląda tak: 

    (url: string) => void

    • url

      ciąg znaków

onRequestFinished

chrome.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