La Output Console renovada: 6 pestañas, sin DevTools
Abrir DevTools solo para leer un registro es un cambio de contexto que haces cien veces al día sin pensarlo. La Output Console renovada elimina ese cambio por completo: un visor de registros de solo lectura que vive dentro de la página, con seis pestañas que cubren la salida de la consola, el tráfico de red, los errores no capturados y el dataLayer de GTM. Sin F12. Sin excusas de máquina bloqueada. Este es el recorrido completo.
Qué es realmente la Output Console
La Output Console es una de las ventanas de desarrollador integradas en la pestaña de JustZix — un "panel" renderizado directamente en el DOM de la página por la extensión. Es de solo lectura: no escribes en ella. A diferencia de la JS Console (un REPL donde ejecutas código), los registros fluyen hacia la Output Console por sí solos. La abres y se va llenando.
Hay dos formas de abrirla:
- Desde el menú del botón flotante de JustZix — una ventana persistente vinculada a la regla.
- Con el atajo de teclado Ctrl+Alt+K — una ventana TEMP que invocas en el momento y descartas cuando terminas.
Es una ventana como cualquier otro panel de JustZix: arrástrala, redimensiónala, apártala. No bloquea la página de debajo.
Por qué una ventana de registros dentro de la pestaña supera a DevTools
DevTools es excelente. También es algo que no siempre está disponible y no siempre es cómodo. Razones concretas por las que la consola integrada gana:
- Máquinas bloqueadas. Política corporativa, modo kiosco, un perfil de Chrome gestionado — muchos entornos desactivan u ocultan DevTools. La Output Console es simplemente parte de la página; no hay nada que desbloquear.
- Sin cambio de contexto. El registro está junto al contenido que estás depurando, en la misma ventana visible. No estás dividiendo la pantalla ni cubriendo la mitad de la página con un panel acoplado.
- Sobrevive a una configuración sin florituras. Sin source maps, sin extensiones que un compañero olvidó instalar, sin el ritual de "abrir DevTools, cambiar a la pestaña correcta, limpiar el filtro". Es un solo clic.
- Viene con una regla. Un paquete de reglas de JustZix se puede compartir. Entrega a un compañero una regla que abra la Output Console en un patrón de URL concreto, y obtiene la misma superficie de depuración que tú — cero configuración por su parte.
No es un reemplazo de DevTools para trabajo profundo. Es la herramienta adecuada cuando quieres ver qué está haciendo una página sin ceremonias.
Seis pestañas, cada una con un contador en vivo
La ventana está organizada en seis pestañas. Cada pestaña lleva una insignia que muestra cuántas entradas contiene actualmente, actualizada en vivo a medida que la página se ejecuta:
| Pestaña | Qué muestra |
|---|---|
| All | Cada entrada de cada origen, en orden cronológico. |
| JZconsole | Solo la salida de tu propio logger window.JUSTZIX.*. |
| Console | Solo el console.log/info/warn/error/debug estándar de la página. |
| Network | Las peticiones de red de la página, capturadas mediante chrome.webRequest. |
| Errors | Excepciones no capturadas y rechazos de promesas no manejados, cada uno expandible. |
| DataLayer | Los pushes de window.dataLayer (GTM) más una vista en vivo del objeto. |
La separación entre JZconsole y Console es deliberada. Tu propio registro de depuración no debería ahogarse en el ruido de la página, y el ruido de la página no debería ahogar tu registro. Mantenlos separados, o léelos combinados bajo All.
La barra de filtros contextual
Entre las pestañas y el cuadro de búsqueda hay una barra de filtros que cambia según la pestaña activa. No hay un único filtro global — cada tipo de dato recibe los controles que tienen sentido para él:
- All — sin filtros adicionales. Es la manguera de bombero.
- JZconsole / Console — casillas de nivel:
log,info,warn,error,debug. Desmarca un nivel y esas líneas desaparecen. ¿Quieres solo errores y advertencias? Desmarca las otras tres. - Network — tres filas de controles (tipo de recurso, clase de estado HTTP, deslizadores de tamaño/duración más un filtro de dominio). El análisis a fondo de la pestaña Network cubre estos en detalle.
- Errors — sin casillas; en su lugar, cada error se expande para revelar su pila y detalles.
- DataLayer — la ventana se divide en dos columnas (más sobre esto abajo).
Como la barra es contextual, nunca te desplazas más allá de controles irrelevantes. La pestaña Console no te muestra un filtro de dominio; la pestaña Network no te muestra casillas de nivel de registro.
El cuadro de búsqueda
Debajo de la barra de filtros, siempre visible, hay un cuadro de búsqueda. Es un filtro de subcadena en vivo e insensible a mayúsculas sobre las entradas de la pestaña activa. Escribe checkout y la lista se reduce mientras escribes. Pulsa Esc para limpiarlo al instante.
La búsqueda y los filtros contextuales se acumulan. En la pestaña Network puedes desmarcar todo excepto el estado 4xx/5xx, luego escribir un fragmento de ruta en el cuadro de búsqueda para localizar un endpoint que falla.
Registros de consola plegables
Las llamadas reales a console.* registran objetos, arrays, payloads grandes. Volcados en bruto, veinte de esos hacen la pestaña ilegible. Por eso las entradas de console.* están plegadas por defecto — cada una muestra una breve línea de vista previa, algo como:
[Checkout][14:22:07] EVENT: {…}Haz clic en la línea y se expande en un árbol JSON completo de cada argumento, al estilo de DevTools — profundiza en objetos anidados, expande arrays, lee el payload completo. Vuelve a plegarlo cuando termines. Obtienes una lista escaneable y detalle completo bajo demanda, no una cosa o la otra.
La pestaña Errors
La pestaña Errors recopila lo que realmente se rompió: excepciones no capturadas y rechazos de promesas no manejados. Cada entrada se expande para mostrar la traza de pila y los detalles, de modo que puedas pasar de "algo falló" a "esta línea de este archivo" sin salir de la página.
Una advertencia honesta que vale la pena conocer de antemano: un fetch o XHR fallido — una API que devuelve 404 o 500 — no es una excepción de JavaScript. No aparecerá en la pestaña Errors. Para esos, vas a la pestaña Network y filtras por estado 4xx/5xx. La pestaña Errors es para código que lanzó una excepción, no para peticiones que fallaron.
La pestaña DataLayer
Si la página ejecuta Google Tag Manager, la pestaña DataLayer es la forma más rápida de ver qué está recibiendo GTM. La ventana se divide en dos columnas:
- Izquierda — "Nuevos pushes": el flujo de llamadas
dataLayer.push(...)en orden de eventos. Cada push que hace la página aparece aquí a medida que ocurre. - Derecha — "Estado actual": el objeto
window.dataLayeren vivo como un árbol JSON indexado (0:,1:, …) y expandible. La instantánea se refresca tras cada push, y la cabecera de la columna tiene botones de expandir todo / plegar todo.
Ves tanto los eventos a medida que se disparan como el estado acumulado a la vez — sin adivinar si un push llegó, sin abrir una extensión de depuración de etiquetas.
El logger window.JUSTZIX
La Output Console no es solo un visor pasivo — incluye una API de registro para tu propio código. Cualquier cosa que escribas en el panel JS, en una acción de regla o en el código de la página puede registrarse directamente en la pestaña JZconsole:
JUSTZIX.log('cart loaded', cart);
JUSTZIX.info('user is logged in');
JUSTZIX.warn('coupon field empty');
JUSTZIX.error('checkout API failed', err);
JUSTZIX.debug('raw payload', payload);Los cinco métodos se corresponden con los cinco niveles que controlan las casillas del filtro de JZconsole. Los alias lo mantienen cómodo y seguro:
window.__JUSTZIX__— siempre disponible.window.JZ— disponible solo si la página no posee yawindow.JZ, así JustZix nunca pisa la propia variable global del sitio.
Como tus registros caen en su propia pestaña, permanecen legibles sin importar lo charlatana que sea la console nativa de la página.
Una primera sesión práctica
- Pulsa Ctrl+Alt+K en la página que quieres inspeccionar — la Output Console se abre como ventana TEMP.
- Empieza en All para hacerte una idea general, luego pasa a la pestaña que importa.
- ¿Depurando tu propia regla? Salpica llamadas
JUSTZIX.log(...)y observa JZconsole. - ¿La página se comporta mal? Revisa Errors para código que lanzó excepciones, Network para peticiones fallidas.
- ¿Auditando analítica? Abre DataLayer y dispara el flujo de usuario.
- Reduce cualquier cosa con las casillas de nivel y el cuadro de búsqueda; Esc limpia la búsqueda.
Véase también
- La pestaña Network en profundidad — un panel de red sin DevTools
- Ejemplos de JustZix — reglas CSS y JS listas para usar
La Output Console renovada convierte "abrir DevTools y escarbar" en "echar un vistazo a la pestaña junto a la página". Descarga JustZix — es gratis, funciona en Chrome 100+ y se instala en unos dos minutos.
Valora este artículo
Sin valoraciones — sé el primero.