chrome.debugger

Description

L'API chrome.debugger sert de transport alternatif pour le protocole de débogage à distance de Chrome. Utilisez chrome.debugger pour vous attacher à un ou plusieurs onglets afin d'instrumenter l'interaction réseau, de déboguer JavaScript, de modifier le DOM et le CSS, et plus encore. Utilisez la propriété Debuggee tabId pour cibler les onglets avec sendCommand et acheminer les événements par tabId à partir des rappels onEvent.

Autorisations

debugger

Pour utiliser cette API, vous devez déclarer l'autorisation "debugger" dans le fichier manifeste de votre extension.

{
  "name": "My extension",
  ...
  "permissions": [
    "debugger",
  ],
  ...
}

Concepts et utilisation

Une fois le processus associé, l'API chrome.debugger vous permet d'envoyer des commandes Chrome DevTools Protocol (CDP) à une cible donnée. L'explication détaillée du CDP ne fait pas partie de cette documentation. Pour en savoir plus sur le CDP, consultez la documentation officielle sur le CDP.

Cibles

Les cibles représentent un élément en cours de débogage (un onglet, un iFrame ou un worker, par exemple). Chaque cible est identifiée par un UUID et est associée à un type (iframe, shared_worker, etc.).

Dans une cible, il peut y avoir plusieurs contextes d'exécution. Par exemple, les iFrames du même processus n'obtiennent pas de cible unique, mais sont plutôt représentés comme des contextes différents accessibles à partir d'une seule cible.

Domaines restreints

Pour des raisons de sécurité, l'API chrome.debugger ne donne pas accès à tous les domaines du protocole Chrome DevTools. Les domaines disponibles sont les suivants : Accessibility, Audits, CacheStorage, Console, CSS, Database, Debugger, DOM, DOMDebugger, DOMSnapshot, Emulation, Fetch, IO, Input, Inspector, Log, Network, Overlay, Page, Performance, Profiler, Runtime, Storage, Target, Tracing, WebAudio et WebAuthn.

Utiliser des frames

Il n'existe pas de mappage un-à-un entre les frames et les cibles. Dans un même onglet, plusieurs frames de même processus peuvent partager la même cible, mais utiliser un contexte d'exécution différent. En revanche, une nouvelle cible peut être créée pour un iFrame hors processus.

Pour l'associer à toutes les images, vous devez gérer chaque type d'image séparément :

  • Écoutez l'événement Runtime.executionContextCreated pour identifier les nouveaux contextes d'exécution associés aux mêmes frames de processus.

  • Suivez la procédure pour associer des cibles associées afin d'identifier les frames hors processus.

Après vous être connecté à une cible, vous pouvez vous connecter à d'autres cibles associées, y compris des frames enfants hors processus ou des workers associés.

À partir de Chrome 125, l'API chrome.debugger est compatible avec les sessions plates. Cela vous permet d'ajouter des cibles supplémentaires en tant qu'enfants à votre session de débogage principale et de leur envoyer des messages sans avoir besoin d'un autre appel à chrome.debugger.attach. Vous pouvez ajouter une propriété sessionId lorsque vous appelez chrome.debugger.sendCommand pour identifier la cible enfant à laquelle vous souhaitez envoyer une commande.

Pour s'associer automatiquement aux frames enfants hors processus, commencez par ajouter un écouteur pour l'événement Target.attachedToTarget :

chrome.debugger.onEvent.addListener((source, method, params) => {
  if (method === "Target.attachedToTarget") {
    // `source` identifies the parent session, but we need to construct a new
    // identifier for the child session
    const session = { ...source, sessionId: params.sessionId };

    // Call any needed CDP commands for the child session
    await chrome.debugger.sendCommand(session, "Runtime.enable");
  }
});

Ensuite, activez l'attachement automatique en envoyant la commande Target.setAutoAttach avec l'option flatten définie sur true :

await chrome.debugger.sendCommand({ tabId }, "Target.setAutoAttach", {
  autoAttach: true,
  waitForDebuggerOnStart: false,
  flatten: true,
  filter: [{ type: "iframe", exclude: false }]
});

L'attachement automatique ne s'applique qu'aux frames dont la cible a connaissance, c'est-à-dire uniquement aux frames qui sont des enfants immédiats d'un frame qui lui est associé. Par exemple, avec la hiérarchie de frames A -> B -> C (où tous sont cross-origin), l'appel de Target.setAutoAttach pour la cible associée à A entraînera également l'association de la session à B. Toutefois, cette opération n'est pas récursive. Target.setAutoAttach doit donc également être appelé pour que B associe la session à C.

Exemples

Pour essayer cette API, installez l'exemple d'API du débogueur à partir du dépôt chrome-extension-samples.

Types

Debuggee

Identifiant de l'élément débogué. Vous devez spécifier tabId, extensionId ou targetId.

Propriétés

  • extensionId

    chaîne facultative

    ID de l'extension que vous souhaitez déboguer. Il n'est possible de s'associer à une page d'arrière-plan d'extension que lorsque le commutateur de ligne de commande --silent-debugger-extension-api est utilisé.

  • tabId

    number facultatif

    ID de l'onglet que vous souhaitez déboguer.

  • targetId

    chaîne facultative

    ID opaque de la cible de débogage.

DebuggerSession

Chrome 125 et versions ultérieures

Identifiant de session du débogueur. Vous devez spécifier tabId, extensionId ou targetId. Vous pouvez également fournir un sessionId facultatif. Si sessionId est spécifié pour les arguments envoyés depuis onEvent, cela signifie que l'événement provient d'une session de protocole enfant au sein de la session de débogage racine. Si sessionId est spécifié lorsqu'il est transmis à sendCommand, il cible une session de protocole enfant dans la session de débogage racine.

Propriétés

  • extensionId

    chaîne facultative

    ID de l'extension que vous souhaitez déboguer. Il n'est possible de s'associer à une page d'arrière-plan d'extension que lorsque le commutateur de ligne de commande --silent-debugger-extension-api est utilisé.

  • sessionId

    chaîne facultative

    ID opaque de la session du protocole Chrome DevTools. Identifie une session enfant dans la session racine identifiée par tabId, extensionId ou targetId.

  • tabId

    number facultatif

    ID de l'onglet que vous souhaitez déboguer.

  • targetId

    chaîne facultative

    ID opaque de la cible de débogage.

DetachReason

Chrome 44 et versions ultérieures

Motif de la terminaison de la connexion.

Énumération

"target_closed"

"canceled_by_user"

TargetInfo

Informations de débogage de la cible

Propriétés

  • associé

    booléen

    "True" si le débogueur est déjà associé.

  • extensionId

    chaîne facultative

    ID de l'extension, défini si le type est "background_page".

  • faviconUrl

    chaîne facultative

    URL du favicon cible.

  • id

    chaîne

    ID de la cible.

  • tabId

    number facultatif

    ID de l'onglet, défini si le type est "page".

  • titre

    chaîne

    Titre de la page cible.

  • Type de cible.

  • url

    chaîne

    URL cible.

TargetInfoType

Chrome 44 et versions ultérieures

Type de cible.

Énumération

"page"

"background_page"

"worker"

"other"

Méthodes

attach()

chrome.debugger.attach(
  target: Debuggee,
  requiredVersion: string,
): Promise<void>

Associe le débogueur à la cible indiquée.

Paramètres

  • cible

    Debuggee

    Cible de débogage à laquelle vous souhaitez associer le débogueur.

  • requiredVersion

    chaîne

    Version requise du protocole de débogage ("0.1"). Vous ne pouvez vous associer au débogueur qu'avec une version majeure correspondante et une version mineure supérieure ou égale. Pour obtenir la liste des versions du protocole, cliquez ici.

Renvoie

  • Promise<void>

    Chrome 96 et versions ultérieures

detach()

chrome.debugger.detach(
  target: Debuggee,
): Promise<void>

Détache le débogueur de la cible donnée.

Paramètres

  • cible

    Debuggee

    Cible de débogage à partir de laquelle vous souhaitez dissocier.

Renvoie

  • Promise<void>

    Chrome 96 et versions ultérieures

getTargets()

chrome.debugger.getTargets(): Promise<TargetInfo[]>

Renvoie la liste des cibles de débogage disponibles.

Renvoie

  • Promise<TargetInfo[]>

    Chrome 96 et versions ultérieures

sendCommand()

chrome.debugger.sendCommand(
  target: DebuggerSession,
  method: string,
  commandParams?: object,
): Promise<object | undefined>

Envoie la commande donnée à la cible de débogage.

Paramètres

  • Cible de débogage à laquelle vous souhaitez envoyer la commande.

  • method

    chaîne

    Nom de la méthode. Doit être l'une des méthodes définies par le protocole de débogage à distance.

  • commandParams

    object facultatif

    Objet JSON contenant les paramètres de la requête. Cet objet doit être conforme au schéma des paramètres de débogage à distance pour la méthode donnée.

Renvoie

  • Promise<object | undefined>

    Chrome 96 et versions ultérieures

Événements

onDetach

chrome.debugger.onDetach.addListener(
  callback: function,
)

Événement déclenché lorsque le navigateur met fin à la session de débogage de l'onglet. Cela se produit lorsque l'onglet est fermé ou que les outils de développement Chrome sont appelés pour l'onglet associé.

Paramètres

onEvent

chrome.debugger.onEvent.addListener(
  callback: function,
)

Déclenché chaque fois qu'un événement d'instrumentation de problème de cible de débogage se produit.

Paramètres

  • callback

    fonction

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

    (source: DebuggerSession, method: string, params?: object) => void