browser.debugger

Descripción

La API de chrome.debugger sirve como un transporte alternativo para el protocolo de depuración remota de Chrome. Usa chrome.debugger para adjuntar a una o más pestañas para instrumentar la interacción de red, depurar JavaScript, mutar el DOM y CSS, y mucho más. Usa la propiedad tabId de Debuggee para segmentar las pestañas con sendCommand y enrutar los eventos por tabId desde las devoluciones de llamada de onEvent.

Permisos

debugger

Debes declarar el permiso "debugger" en el manifiesto de tu extensión para usar esta API.

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

Restricciones de la política empresarial

En los dispositivos empresariales, algunas políticas pueden restringir que las extensiones adjunten el depurador con un modelo de todo o nada en el momento de la conexión (browser.debugger.attach()):

  • Restricciones de hosts: Si la política empresarial ExtensionSettings configura hosts bloqueados (runtime_blocked_hosts) para una extensión, browser.debugger.attach() se bloquea en todos los destinos con el error "Host access is restricted by policy." (incluso si los orígenes individuales están en runtime_allowed_hosts).
  • Políticas de captura de pantalla y DLP: Si la política empresarial DisableScreenshots inhabilita la captura de pantalla o se aplican reglas de prevención de pérdida de datos (DLP) al destino, browser.debugger.attach() falla con el error "Screenshot capture is restricted by policy.".

Conceptos y uso

Una vez conectada, la API de browser.debugger te permite enviar comandos del Protocolo de Herramientas para desarrolladores de Chrome (CDP) a un destino determinado. Explicar el CDP en profundidad está fuera del alcance de esta documentación. Para obtener más información sobre el CDP, consulta la documentación oficial del CDP.

Destinos

Los destinos representan algo que se está depurando, lo que podría incluir una pestaña, un iframe o un trabajador. Cada destino se identifica con un UUID y tiene un tipo asociado (como iframe, shared_worker y más).

Dentro de un destino, puede haber varios contextos de ejecución; por ejemplo, los iframes del mismo proceso no obtienen un destino único, sino que se representan como contextos diferentes a los que se puede acceder desde un solo destino.

Dominios restringidos

Por motivos de seguridad, la API de browser.debugger no proporciona acceso a todos los dominios del protocolo de las Herramientas para desarrolladores de Chrome. Los dominios disponibles son los siguientes: Accesibilidad, Auditorías, CacheStorage, Consola, CSS, Base de datos, Depurador, DOM, DOMDebugger, DOMSnapshot, Emulación, Recuperación, E/S, Entrada, Inspector, Registro, Red, Superposición, Página, Rendimiento, Entorno de ejecución, Almacenamiento, Destino, Seguimiento, WebAudio y WebAuthn.

Cómo trabajar con marcos

No hay una asignación uno a uno de fotogramas a objetivos. En una sola pestaña, varios marcos del mismo proceso pueden compartir el mismo destino, pero usar un contexto de ejecución diferente. Por otro lado, se puede crear un destino nuevo para un iframe fuera de proceso.

Para adjuntarlo a todos los marcos, debes controlar cada tipo de marco por separado:

  • Escucha el evento Runtime.executionContextCreated para identificar nuevos contextos de ejecución asociados con los mismos marcos de proceso.

  • Sigue los pasos para adjuntar a destinos relacionados y, así, identificar los marcos fuera de proceso.

Después de conectarte a un destino, es posible que quieras conectarte a otros destinos relacionados, incluidos los marcos secundarios fuera de proceso o los trabajadores asociados.

A partir de Chrome 125, la API de browser.debugger admite sesiones planas. Esto te permite agregar destinos adicionales como elementos secundarios a tu sesión principal del depurador y enviarles mensajes sin necesidad de otra llamada a browser.debugger.attach. En su lugar, puedes agregar una propiedad sessionId cuando llames a browser.debugger.sendCommand para identificar el destino secundario al que deseas enviar un comando.

Para adjuntar automáticamente a marcos secundarios fuera de proceso, primero agrega un objeto de escucha para el evento Target.attachedToTarget:

browser.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 browser.debugger.sendCommand(session, "Runtime.enable");
  }
});

Luego, habilita la conexión automática enviando el comando Target.setAutoAttach con la opción flatten establecida en true:

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

La conexión automática solo se conecta a los marcos que el destino conoce, que se limitan a los marcos que son elementos secundarios inmediatos de un marco asociado a él. Por ejemplo, con la jerarquía de marcos A -> B -> C (en la que todos son de origen cruzado), llamar a Target.setAutoAttach para el destino asociado con A haría que la sesión también se adjunte a B. Sin embargo, esto no es recursivo, por lo que también se debe llamar a Target.setAutoAttach para que B adjunte la sesión a C.

Ejemplos

Para probar esta API, instala el ejemplo de la API de depurador del repositorio chrome-extension-samples.

Tipos

Debuggee

Es el identificador del depurado. Se debe especificar tabId, extensionId o targetId

Propiedades

  • extensionId

    string opcional

    Es el ID de la extensión que quieres depurar. Solo se puede adjuntar a una página en segundo plano de la extensión cuando se usa el interruptor de línea de comandos --silent-debugger-extension-api.

  • tabId

    number opcional

    Es el ID de la pestaña que quieres depurar.

  • targetId

    string opcional

    Es el ID opaco del destino de depuración.

DebuggerSession

Chrome 125 y versiones posteriores browser.* desde Chrome 148

Es el identificador de la sesión del depurador. Se debe especificar tabId, extensionId o targetId. Además, se puede proporcionar un sessionId opcional. Si se especifica sessionId para los argumentos enviados desde onEvent, significa que el evento proviene de una sesión de protocolo secundaria dentro de la sesión raíz del depurado. Si se especifica sessionId cuando se pasa a sendCommand, se orienta a una sesión de protocolo secundaria dentro de la sesión de depuración raíz.

Propiedades

  • extensionId

    string opcional

    Es el ID de la extensión que quieres depurar. Solo se puede adjuntar a una página en segundo plano de la extensión cuando se usa el interruptor de línea de comandos --silent-debugger-extension-api.

  • sessionId

    string opcional

    Es el ID opaco de la sesión del protocolo de Herramientas para desarrolladores de Chrome. Identifica una sesión secundaria dentro de la sesión raíz identificada por tabId, extensionId o targetId.

  • tabId

    number opcional

    Es el ID de la pestaña que quieres depurar.

  • targetId

    string opcional

    Es el ID opaco del destino de depuración.

DetachReason

Chrome 44 y versiones posteriores browser.* desde Chrome 148

Es el motivo de la finalización de la conexión.

Enum

"target_closed"

"canceled_by_user"

TargetInfo

Información del destino de depuración

Propiedades

  • se conecte el disco

    booleano

    Es verdadero si el depurador ya está adjunto.

  • extensionId

    string opcional

    Es el ID de la extensión, que se define si type = 'background_page'.

  • faviconUrl

    string opcional

    Es la URL del ícono de página de destino.

  • id

    string

    ID de destino.

  • tabId

    number opcional

    Es el ID de la pestaña, que se define si el tipo es "page".

  • título

    string

    Es el título de la página de destino.

  • Es el tipo de destino.

  • url

    string

    URL de destino.

TargetInfoType

Chrome 44 y versiones posteriores browser.* desde Chrome 148

Es el tipo de destino.

Enum

"page"

"background_page"

"worker"

"other"

Métodos

attach()

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

Adjunta el depurador al destino determinado.

Parámetros

  • objetivo

    Debuggee

    Es el destino de depuración al que deseas conectarte.

  • requiredVersion

    string

    Es la versión del protocolo de depuración requerida ("0.1"). Solo se puede conectar al depurado con la versión principal coincidente y la versión secundaria mayor o igual. La lista de las versiones del protocolo se puede obtener aquí.

Muestra

  • Promise<void>

    Chrome 96 y versiones posteriores browser.* desde Chrome 148

    Se resuelve una vez que la operación de conexión se completa correctamente o falla. La promesa se resuelve sin valor. Si la conexión falla, se rechazará la promesa.

detach()

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

Desconecta el depurador del destino determinado.

Parámetros

  • objetivo

    Debuggee

    Es el destino de depuración del que deseas desconectarte.

Muestra

  • Promise<void>

    Chrome 96 y versiones posteriores browser.* desde Chrome 148

    Se resuelve una vez que la operación de desconexión se completa correctamente o falla. La promesa se resuelve sin valor. Si la desconexión falla, se rechazará la promesa.

getTargets()

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

Devuelve la lista de destinos de depuración disponibles.

Muestra

  • Promise<TargetInfo[]>

    Chrome 96 y versiones posteriores browser.* desde Chrome 148

sendCommand()

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

Envía el comando determinado al destino de depuración.

Parámetros

  • objetivo

    DebuggerSession

    Es el destino de depuración al que deseas enviar el comando.

  • método

    string

    Nombre del método. Debe ser uno de los métodos definidos por el protocolo de depuración remota.

  • commandParams

    objeto opcional

    Es un objeto JSON con parámetros de solicitud. Este objeto debe cumplir con el esquema de parámetros de depuración remota para el método determinado.

Muestra

  • Promise<object | undefined>

    Chrome 96 y versiones posteriores browser.* desde Chrome 148

    Es el cuerpo de la respuesta. Si se produce un error mientras se publica el mensaje, se rechazará la promesa.

Eventos

onDetach

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

Se activa cuando el navegador finaliza la sesión de depuración de la pestaña. Esto sucede cuando se cierra la pestaña o se invocan las Herramientas para desarrolladores de Chrome para la pestaña adjunta.

Parámetros

onEvent

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

Se activa cada vez que el destino de depuración emite un evento de instrumentación.

Parámetros

  • callback

    función

    El parámetro callback se ve de la siguiente manera: 

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