← Todos los artículos

Ventanas en el frontend

JS Console en cualquier página — REPL con historial ↑↓, sin DevTools

15 mayo 2026 · por JustZix Team

F12 → Console → escribes algo → pulsas en otro sitio → la pantalla se recoloca, las DevTools han desaparecido. O más a menudo: no quieres las DevTools abiertas con un cliente en la sala. JustZix v2.13.66+ tiene la JS Console — un REPL flotante estilo terminal sobre la página. Ctrl+Enter, historial ↑/↓, Ctrl+L = limpiar, captura cada console.log del contexto de la página.

En qué se diferencia de la Console de las DevTools

Funcionalmente:

• La JS Console vive en la página — una ventana flotante con una cabecera y dos secciones (log de salida + textarea de entrada). No desaparece al cambiar el foco, no se cierra al recargar.
• Persistencia por pestaña — borrador de entrada, log de salida (hasta 200 líneas), historial de comandos (hasta 100) — todo en el sessionStorage. Recarga la pestaña → todo sigue ahí. Console de las DevTools — salida borrada al recargar.
• Jerarquía de scope — la Console aparece solo en las páginas que coinciden con el patrón de URL de su carpeta/grupo/regla. Configuración distinta por proyecto.
• Sync entre dispositivos — tienes una Console «debug Stripe» en el portátil y en la máquina de trabajo. El historial de comandos NO se sincroniza (sessionStorage por pestaña), pero la ventana en sí sí.

Qué es igual: el contexto de la página. Tu código tiene acceso a window, document, a las globales de la página (p. ej. app.store en una app React+Redux). Mismo motor de evaluación, mismo scope.

Primer uso en 60 segundos

1. En las opciones de JustZix elige una carpeta/grupo/regla con un patrón de URL relevante.
2. Pulsa «Ventanas» → modal con la lista de CSS panes + JS panes + JS Console. Elige «+ Console».
3. Introduce un nombre («Stripe REPL»), color (morado predeterminado #7C3AED).
4. Visita una URL que coincida — la Console aparece como ventana flotante (anclada arriba a la derecha).
5. Escribe document.title en la entrada, pulsa Ctrl+Enter. La salida muestra > document.title (eco del comando) + "Verdadero título de la página" (resultado).

Atajos de teclado

Historial: máx. 100 entradas, dedup del último comando (sin repeticiones), persistido en el sessionStorage por pestaña. ↑/↓ funciona solo cuando estás en el borde del textarea — te permite navegar normalmente dentro de código multilínea.

Captura de console.log/warn/error/info (v2.13.67)

Tu eval puede llamar a console.log('x') — aparecerá en la salida de la Console bajo el comando:

> console.log('hello'); 42
[log] hello
  42

Primero los valores logueados, luego el valor de retorno. Funciona también para console.warn, console.error, console.info — cada uno con su propio prefijo ([warn], [err], [info]) y color.

Bonus: si la propia página loguea algo desde el contexto de la página durante tu eval (p. ej. un fetch en tu código loguea un error XHR), lo verás en la Console. Es oro para depurar — el analista ve exactamente lo que ocurre bajo el capó.

Qué controlas de verdad

1. Test fetch rápido antes de añadirlo a una regla

> fetch('/api/products/12345').then(r => r.json()).then(console.log)
[log] {id: 12345, name: "...", price: 99.99}

Verifica que el endpoint devuelva lo que esperas. Sin abrir el panel Network de las DevTools.

2. «Qué hay en Redux»

> window.__REDUX_DEVTOOLS_EXTENSION__?.connect?.(); store?.getState?.()
  {user: {...}, cart: {...}, products: [...]}

Volcado en un clic del estado actual, sin instalar Redux DevTools.

3. «Cuántos h2 hay en esta página»

> document.querySelectorAll('h2').length
  47

Comprobaciones sobre la estructura de la página, pre-validación de los selectores CSS.

4. Override puntual

> document.querySelectorAll('.ad').forEach(el => el.remove())
  undefined

Puramente destructivo, una sola vez. No quieres una regla CSS/JS para esto — quieres la acción una vez. La Console te da JS a coste cero.

5. Didáctico

Estás enseñando a un desarrollador junior o a alguien sin experiencia con las DevTools. Demuestras typeof null, [].map(x => x + 1), Array.from('hello'). Una Console en la página intimida menos que las DevTools.

Jerarquía de scope — Console «debug GA» solo en *shop*

Una JS Console vinculada a la carpeta «E-commerce» aparece en cada página que coincide con shop.com/*. No en YouTube. No en Gmail. Una Console «Stripe Dashboard» en dashboard.stripe.com/* — inútil en otro sitio, así que no aparece. Cada proyecto obtiene su propio REPL.

Además: hide-for-page (pulsa ✕ en la cabecera del pane, o clic derecho → ocultar) — la Console desaparece para la pestaña actual. Recargar la pestaña = restablece (flag de sessionStorage reseteado).

Trampas

• Eval async — await fetch(...) sin wrapper no funciona (sin top-level await). Envuélvelo en una IIFE: (async () => { const r = await fetch(...); console.log(await r.json()); })(). O usa .then(...).
• Límite del sessionStorage — se mantienen las últimas 200 líneas de salida, las más antiguas se recortan (para que el storage no crezca sin límites). Historial hasta 100 comandos.
• Recargar la pestaña = no pierde la salida. Cerrar la pestaña = la pierde. Si quieres conservar algo — cópialo en un archivo externo, o en una regla JS permanente.
• Iframe en sandbox — la Console no se muestra dentro del contenido de un iframe (a menos que la URL del iframe coincida por separado con un patrón de scope). Iframe cross-origin = scope separado.

Qué hacer después

La JS Console es el 3.er tipo de «ventana en la página» de JustZix. El primero (CSS pane) — editor CSS en tiempo real. El segundo (JS pane) — código JS persistente con Run-on-demand. El tercero (Console) — REPL. El cuarto (Output Console) — logger personalizado para el JS del usuario, previsto.

Instala JustZix y ten un REPL en cada pestaña, sin F12.