El protocolo por debajo: ver el tráfico que genera cada clic

Todo lo que hace la interfaz de las DevTools —expandir un nodo, poner un punto de parada, grabar un perfil, cambiar una propiedad— se traduce en mensajes de un protocolo que viajan a través de una conexión con el navegador. La interfaz no tiene ningún acceso privilegiado: es un cliente más. Esa arquitectura, que en el nivel de ontología era un hecho conceptual, aquí se vuelve práctica, porque significa que cualquier programa puede hacer exactamente lo mismo.

El monitor de protocolo

Es una vista del cajón inferior que se abre por su nombre desde el menú de comandos y que registra todos los mensajes que la interfaz intercambia con el navegador.

Su valor didáctico es enorme: hacer una acción cualquiera en las DevTools y leer los mensajes que ha generado enseña más sobre el funcionamiento interno que cualquier documentación. Pulsar sobre un nodo del árbol produce una cascada de peticiones de nodos hijos; poner un punto de parada produce un comando concreto; grabar un perfil produce una activación de traza y un torrente de eventos.

Los mensajes tienen dos formas.

Comandos. Petición y respuesta, con un identificador que las empareja. Tienen un método, unos parámetros y un resultado.

Eventos. Del navegador hacia el cliente, sin petición previa. Notifican que algo ha pasado: un nodo se ha modificado, ha llegado una respuesta, se ha alcanzado un punto de parada.

El monitor tiene además un campo para enviar comandos a mano, y ahí es donde deja de ser un visor y pasa a ser una herramienta. Cualquier cosa que el protocolo pueda hacer, y hay mucho más de lo que la interfaz expone, se puede probar escribiendo el método y sus parámetros.

Conectar un cliente externo

El navegador expone el protocolo cuando se arranca con la opción de depuración remota y un puerto. Una vez arrancado así, hay un punto de entrada de descubrimiento sobre HTTP con varias rutas útiles.

La ruta de versión devuelve información del navegador y, sobre todo, la dirección de conexión al destino del navegador entero.

La ruta de lista devuelve todos los destinos inspeccionables —pestañas, workers, extensiones— cada uno con su identificador y su dirección de conexión.

La ruta de creación abre una pestaña nueva y devuelve su destino.

Con la dirección de conexión de un destino, cualquier cliente que hable el protocolo puede conectarse y empezar a enviar comandos.

// Cliente minimo del protocolo, ejecutable en Node contra un Chrome
// arrancado con la opcion de depuracion remota en el puerto 9222.
import WebSocket from 'ws';   // npm install ws

async function conectar(puerto = 9222) {
  const lista = await fetch(`http://localhost:${puerto}/json/list`).then(r => r.json());
  const pagina = lista.find(t => t.type === 'page');
  if (!pagina) throw new Error('No hay ninguna pestana inspeccionable.');
  console.log('Conectando a:', pagina.title, '|', pagina.url);

  const ws = new WebSocket(pagina.webSocketDebuggerUrl);
  await new Promise(r => ws.once('open', r));

  let siguienteId = 1;
  const pendientes = new Map();
  const oyentes = new Map();

  ws.on('message', (bruto) => {
    const mensaje = JSON.parse(bruto);
    if (mensaje.id && pendientes.has(mensaje.id)) {
      const { resolver, rechazar } = pendientes.get(mensaje.id);
      pendientes.delete(mensaje.id);
      mensaje.error ? rechazar(new Error(mensaje.error.message)) : resolver(mensaje.result);
    } else if (mensaje.method) {
      (oyentes.get(mensaje.method) ?? []).forEach(fn => fn(mensaje.params));
    }
  });

  return {
    enviar(metodo, parametros = {}) {
      const id = siguienteId++;
      return new Promise((resolver, rechazar) => {
        pendientes.set(id, { resolver, rechazar });
        ws.send(JSON.stringify({ id, method: metodo, params: parametros }));
      });
    },
    al(evento, fn) {
      if (!oyentes.has(evento)) oyentes.set(evento, []);
      oyentes.get(evento).push(fn);
    },
    cerrar() { ws.close(); }
  };
}

// Uso: navegar, esperar y evaluar codigo en la pagina
const cliente = await conectar();

await cliente.enviar('Page.enable');
await cliente.enviar('Runtime.enable');
await cliente.enviar('Network.enable');

cliente.al('Network.responseReceived', ({ response }) => {
  console.log(response.status, response.url.slice(0, 80));
});

await cliente.enviar('Page.navigate', { url: 'https://example.com' });
await new Promise(r => cliente.al('Page.loadEventFired', r));

const { result } = await cliente.enviar('Runtime.evaluate', {
  expression: 'document.title + " | " + document.querySelectorAll("*").length + " elementos"',
  returnByValue: true
});
console.log('Resultado de la evaluacion:', result.value);

cliente.cerrar();

Ese cliente de sesenta líneas hace lo mismo que hacen las librerías de automatización por debajo. No es un ejercicio teórico: entender que la automatización de navegadores es esto, y no una magia aparte, es lo que permite salirse del camino trillado cuando una librería no expone algo que el protocolo sí ofrece.

Qué implica que la interfaz sea un cliente

Cuatro consecuencias prácticas que se derivan directamente de esta arquitectura.

Todo lo que ves en la interfaz se puede automatizar. No hay funcionalidad que solo exista en el panel: si el panel puede hacerlo, es porque envía comandos, y esos comandos los puedes enviar tú.

Hay mucho más en el protocolo que en la interfaz. El protocolo cubre capacidades que ningún panel expone, y algunas son muy útiles: interceptar y modificar peticiones antes de que salgan, emular condiciones que no están en ningún menú, capturar imágenes con parámetros arbitrarios, controlar la recolección de basura.

Dos clientes pueden competir. Si tienes las DevTools abiertas y además un script conectado, los dos envían comandos y algunos son excluyentes. Es la causa de comportamientos extraños al automatizar con el panel abierto.

El protocolo es una superficie de seguridad. Un navegador arrancado con el puerto de depuración abierto y accesible desde la red permite a cualquiera controlarlo por completo: leer cookies, ejecutar código, capturar la pantalla. Nunca se expone ese puerto fuera de la máquina local.

Cuándo bajar a este nivel

Casi nunca hace falta escribir un cliente propio: las librerías de automatización cubren el noventa y cinco por ciento de los casos con una interfaz mucho más cómoda. Bajar al protocolo compensa en cuatro situaciones.

Cuando necesitas algo que la librería no expone. Todas las librerías serias permiten abrir una sesión directa del protocolo desde su propia interfaz, así que no hay que elegir: se usa la librería para lo normal y el protocolo para lo raro.

Cuando quieres escuchar eventos de bajo nivel. El flujo completo de eventos de red, de depurador o de traza da información que las abstracciones filtran.

Cuando construyes una herramienta. Un visor propio, un recolector de métricas, un sistema de captura.

Cuando algo falla y no entiendes por qué. El monitor de protocolo enseña qué está pasando realmente por debajo de la abstracción que estás usando.