chrome.devtools.network

Description

Utilisez l'API chrome.devtools.network pour récupérer les informations sur les requêtes réseau affichées par les outils de développement dans le panneau "Network".

Fichier manifeste

Les clés suivantes doivent être déclarées dans le fichier manifeste pour utiliser cette API.

"devtools_page"

Consultez le récapitulatif des API d'outils de développement pour obtenir une présentation générale de l'utilisation des API des outils de développement.

Présentation

Les informations sur les requêtes réseau sont représentées au format HTTP Archive (HAR). La description de Ce document n'a pas pour objectif de traiter les données HAR. Veuillez consulter les spécifications du fichier HAR v1.2.

En ce qui concerne les données HAR, la méthode chrome.devtools.network.getHAR() renvoie l'intégralité du journal HAR, tandis que L'événement chrome.devtools.network.onRequestFinished fournit une entrée HAR en tant qu'argument de l'événement. .

Notez que le contenu des requêtes n'est pas fourni dans le rapport HAR pour des raisons d'efficacité. Vous pouvez appeler la méthode getContent() de la requête pour récupérer le contenu.

Si la fenêtre "Outils de développement" s'ouvre après le chargement de la page, il est possible que certaines requêtes soient manquantes dans tableau d'entrées renvoyé par getHAR(). Actualisez la page pour obtenir toutes les requêtes. En général, la liste des requêtes renvoyées par getHAR() doit correspondre à celle affichée dans le panneau "Network".

Exemples

Le code suivant enregistre les URL de toutes les images dont la taille est supérieure à 40 Ko lors de leur chargement:

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) + '"))');
    }
  }
);

Pour essayer cette API, installez les exemples d'API Devtools à partir de chrome-extension-samples. un dépôt de clés.

Types

Request

Représente une requête réseau pour une ressource de document (script, image, etc.). Pour en savoir plus, consultez les spécifications HAR.

Propriétés

  • getContent

    vide

    Renvoie le contenu du corps de la réponse.

    La fonction getContent se présente comme suit: 

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

    • rappel

      fonction

      Le paramètre callback se présente comme suit: 

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

      • contenu

        chaîne

        Contenu du corps de la réponse (potentiellement encodé).

      • encoding

        chaîne

        Ce champ est vide si le contenu n'est pas encodé. Sinon, il est vide. Actuellement, seul le format base64 est pris en charge.

Méthodes

getHAR()

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

Affiche un journal HAR contenant toutes les requêtes réseau connues.

Paramètres

  • rappel

    fonction

    Le paramètre callback se présente comme suit: 

    (harLog: object) => void

    • harLog

      objet

      Un journal HAR. Pour en savoir plus, consultez les spécifications HAR.

Événements

onNavigated

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

Déclenché lorsque la fenêtre inspectée accède à une nouvelle page.

Paramètres

  • rappel

    fonction

    Le paramètre callback se présente comme suit: 

    (url: string) => void

    • url

      chaîne

onRequestFinished

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

Déclenché lorsqu'une requête réseau se termine et que toutes les données de la requête sont disponibles.

Paramètres

  • rappel

    fonction

    Le paramètre callback se présente comme suit: 

    (request: Request) => void