← Todos los artículos

Ventanas en el frontend

Output Console: observar el console.log de la página en un panel de la pestaña — sin DevTools

15 mayo 2026 · por JustZix Team

La consola de las DevTools funciona muy bien — cuando está abierta. La mayor parte del tiempo no lo está. Y peor: la consola de las DevTools muestra los logs de cada página que estás usando en ese momento. Difícil pescar «mis logs de este flujo específico» en la avalancha de ruido. La Output Console (desde v2.13.66) es un visor de logs de solo lectura en la pestaña misma — ves los logs de esta pestaña, limitados a este dominio, siempre disponibles como los demás paneles JustZix.

Cuatro tipos de ventanas — dónde encaja la Output Console

Los tres primeros tipos hacen algo a la página. La Output Console escucha. Cada llamada console.log/warn/error/info/debug de la página (y de otros scripts JustZix) llega como una línea coloreada. Además — un canal window.JUSTZIX.log() dedicado (desde v2.13.73; alias primario desde v2.13.76, con nombre de marca y riesgo de colisión despreciable) que NO se reenvía a la consola nativa, solo a la Output Console — tus scripts pueden loguear sin contaminar las DevTools.

Arquitectura — hook de página + broadcast hacia los sinks

La Output Console trabaja en dos pasos:

1. Hook de página (MAIN world) — Inyectado vía chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) (inmune a la CSP desde v2.13.74). Envuelve console.log/warn/error/info/debug conservando el passthrough hacia el original (las DevTools no pierden nada), pero cada llamada hace también window.postMessage({source:'jz-output-console', kind:'console', level, text, t}).
2. Broadcast hacia los sinks (ISOLATED world) — El content script de JustZix escucha window.message y hace el broadcast de las entradas hacia todos los paneles Output Console actualmente renderizados mediante el Map _outputConsoleSinks. Cada panel añade su línea a su propio log (estado por instancia).

Además stringifyArg — un transformador de argumentos consciente de los tipos:

• string/number/bool → literal
• Error → .stack (stack trace completo, no solo el mensaje)
• objeto → JSON.stringify con una protección anti-ciclos (WeakSet, así JSON.stringify(window) no se bloquea)
• función → centinela [Function: name]
• undefined → literal undefined (no desaparece dentro de JSON.stringify)

viewMode: [C+J] / [C] / [J] — dos canales, un panel

Desde v2.13.73 la Output Console tiene un botón viewMode cíclico en la cabecera. Tres estados:

Implementación: cero overhead JS por línea. Cada entrada recibe una clase jz-output-line-{kind}, y el modo añade una clase jz-output-mode-{mode} sobre el pane. Las reglas CSS de ocultación hacen el resto:

.jz-output-mode-standard .jz-output-line-jz { display: none; }
.jz-output-mode-jz       .jz-output-line-console { display: none; }
/* .jz-output-mode-both muestra todo */

Filtros por nivel + búsqueda — funciones de power-user

Bajo el botón ⚙ se abre un popover con 5 checkboxes: log / info / warn / error / debug. Todas marcadas por defecto excepto debug (default off — las páginas abusan de console.debug para el spam). Mismo mecanismo que el viewMode — clase jz-output-hide-{level} + regla CSS, cero overhead JS.

Además un toggle de búsqueda 🔍 sobre el log. Filtro en vivo con match de subcadena, case-insensitive. Esc lo vacía. Persistido en sessionStorage por pestaña — filtros/búsqueda sobreviven a la recarga.

// Escribe en la JS Console:
for (let i = 0; i < 5; i++) console.log(`Acción usuario ${i}`);
for (let i = 0; i < 5; i++) console.warn(`Aviso usuario ${i}`);
JUSTZIX.log('Log de mi script');

// La Output Console mostrará 11 líneas.
// Pasa a [J] → solo 1 (JUSTZIX.log).
// Pasa a [C] + solo filtro «warn» → 5 (console.warn).
// Búsqueda «usuario 3» → captura «Acción usuario 3» + «Aviso usuario 3».

Caso de uso 1 — Monitorizar dataLayer.push (debug GTM)

Problema GTM clásico: quieres saber qué envía cada tag al dataLayer. Consola de las DevTools = abrirse paso entre decenas de otros logs. Output Console:

// Regla JS (arranca automáticamente en el sitio):
const origPush = window.dataLayer.push;
window.dataLayer.push = function(event) {
  JUSTZIX.log('[dataLayer]', JSON.stringify(event));
  return origPush.call(this, event);
};
JUSTZIX.log('Hook dataLayer instalado.');

La Output Console en modo [J] muestra solo tus líneas JUSTZIX.log — cada tag GTM = una línea coloreada. Filtro «purchase» → solo e-commerce. Filtro «ga4» → solo eventos GA. Sin F12, sin Tag Assistant, sin panel Network.

Caso de uso 2 — Monitorización de un flujo QA largo

Un tester QA registra un flujo de 30 minutos. La consola de las DevTools se llena tras 5 minutos (máximo predeterminado ~1000 líneas). Output Console:

• maxLines 2000 (desde v2.13.73, antes era 500) — suficiente para una sesión larga.
• sessionStorage por pestaña — una recarga no vacía el log (solo el cierre de la pestaña lo hace).
• Toggle auto-scroll en la cabecera — desactívalo para detenerte en una línea específica; el desplazamiento hacia atrás no salta al fondo con cada nuevo log.
• Botón Clear con runColor personalizable (desde v2.13.71) — vacía el log antes del próximo paso QA.

Caso de uso 3 — Rastreo de los errores asíncronos

El overlay de error del JS pane (barra roja) NO captura los errores asíncronos — setTimeout(() => { throw err }, 100) no aparece en el pane. La Output Console SÍ los captura — porque console.error también es invocado por el gestor de errores global:

// Regla JS:
window.addEventListener('error', (e) => {
  JUSTZIX.error('[unhandled]', e.message, '@', e.filename + ':' + e.lineno);
});
window.addEventListener('unhandledrejection', (e) => {
  JUSTZIX.error('[promise reject]', e.reason);
});

La Output Console en modo [J] + filtro «solo error» — cada error global en una lista legible. Cómodo cuando una SPA loguea 50 errores por minuto y solo quieres los tuyos.

Caso de uso 4 — Monitor de las respuestas API

Una página tiene fetch que no aparecen en la vista (sync en segundo plano). Comprueba qué responde el servidor:

// Regla JS — proxy del fetch:
const origFetch = window.fetch;
window.fetch = async function(...args) {
  const res = await origFetch.apply(this, args);
  const clone = res.clone();
  clone.json().then(data => {
    JUSTZIX.log('[fetch]', args[0], '→', JSON.stringify(data).slice(0, 200));
  }).catch(() => {});
  return res;
};

La Output Console muestra la URL + los primeros 200 caracteres de la respuesta JSON. Busca por URL → ves un solo endpoint. Genial para depurar fetch inestables sin el panel Network de F12.

Páginas con CSP estricta — por qué el script inline fallaba (fix v2.13.74)

Hasta v2.13.73 el hook de página se inyectaba como elemento <script> con textContent. Funcionaba en ~99% de las páginas — pero una CSP estricta (script-src 'self' sin 'unsafe-inline', p. ej. GitHub, el checkout de Stripe, los bancos) bloqueaba silenciosamente la ejecución. appendChild tenía éxito (mutación del DOM OK), pero el script no se ejecutaba, ningún error lanzado.

Síntoma: window.JUSTZIX.log is not a function + console.log no aparece en la Output Console. Fix (v2.13.74): el hook pasó a chrome.scripting.executeScript({world: 'MAIN', func: hookFn}) — los privilegios de la extensión vencen a la CSP de la página. Tras la primera instalación la Output Console recibe un mensaje de bienvenida (desde v2.13.76 lista los alias activos): [JustZix] Output Console hook ready. API: window.JUSTZIX (or JZ / __JUSTZIX__).log/.warn/.error/.info/.debug.

Trampas

• Solo lectura. No puedes escribir 2+2 aquí y obtener 4. Es una vista de stream, no un REPL. Para un REPL usa la JS Console.
• console.debug está OFF por defecto en los filtros. La primera vez no verás los logs de debug — es a propósito (el spam de debug es un devorador de productividad). Actívalo en el popover ⚙ si lo necesitas.
• El hook de página debe ocurrir pronto. El hook se inyecta en el primer render de un panel Output Console. Los logs anteriores a ese momento se pierden. Best practice: panel vinculado a una regla padre con match de URL — así el hook se instala desde la carga de la página.
• El logger funciona siempre, incluso cuando la página ocupa window.JZ. Desde v2.13.76 el alias primario es window.JUSTZIX (nombre de marca, riesgo de colisión despreciable), más window.__JUSTZIX__ siempre establecido. El más corto window.JZ es un alias SOLO cuando está libre — en caso de conflicto con la página (p. ej. Google Ads) queda para la página. Usa JUSTZIX.log() cuando no estés seguro del dominio.
• Límite de 2000 líneas. Flujo más largo → las líneas más antiguas se expulsan (FIFO). Guarda el log en un archivo mediante el botón Clear (export JSON previsto para v2.13.75; por ahora copia-pega del DOM).

Qué hacer después

La Output Console cierra el mini-IDE en la pestaña — un canal de solo lectura junto a los tres canales de escritura (CSS pane / JS pane / JS Console). Juntos son una «alternativa a Chrome DevTools para el 80% de los casos» — sin F12, limitada por dominio, con UI personalizable. Mira también window.JZ helpers para el canal de logging dedicado y depurar GTM dataLayer.push como aplicación concreta.

Instala JustZix — completamente gratuito, sin cuenta, sin servidor.