Ventanas en la página — CSS, JS y consolas
JustZix te ofrece cinco tipos de ventanas de desarrollo que se renderizan directamente en la página que visitas — sin abrir DevTools. Las arrastras, las acoplas borde con borde en tu propio mini-panel e invocas una copia efímera con un solo atajo.
Herramientas de desarrollo en la propia página
JustZix renderiza sus ventanas de desarrollo directamente dentro de la página que visitas — no en un panel DevTools, no en una pestaña aparte. Puedes arrastrar cada ventana a donde quieras, acoplar su borde a otra y unir varias en un mini-panel junto al contenido real.
Cada ventana viene en dos variantes: persistente — ligada a una regla concreta y cargada junto a ella — y temporal (TEMP), invocada con un atajo para una prueba rápida. Tú decides si una ventana se queda o desaparece al recargar.
El CSS pane y el JS pane
El CSS pane es un editor de estilos en vivo: escribes una regla y ves la página cambiar en ese mismo instante — sin guardar, sin recargar. Su contenido se mantiene por separado por pestaña, así que cada página tiene su propio borrador.
El JS pane es un editor de JavaScript ejecutado bajo demanda. El código no arranca solo — lo ejecutas con el botón Run o el atajo Ctrl+Enter cuando está listo. Sobre ambos editores funciona una barra de búsqueda con contador de coincidencias, resaltado y saltos Ctrl+Alt+←/→.
La JS Console y la Output Console
La JS Console es un REPL en la página: escribes una expresión, pulsas Enter, obtienes un resultado y usas las flechas arriba y abajo para recuperar comandos anteriores — igual que en una terminal.
La Output Console es un visor de registros de la página con seis pestañas contadas: All, JZconsole, console.*, Network, errores y pushes a dataLayer. La pestaña Network reúne las peticiones de red y te permite filtrarlas por dominio, tamaño y tiempo.
El AI Helper
El AI Helper es un asistente de IA integrado que se conecta a OpenAI, Anthropic o Gemini. Inspecciona la estructura de la página, prueba el código por su cuenta en ventanas TEMP y — solo después de tu aprobación — convierte la solución que funciona en una regla CSS o JS lista para usar.
Ventanas TEMP
Las versiones TEMP son las mismas ventanas, pero efímeras. Las invocas con atajos: Ctrl+Alt+G abre el TEMP CSS pane, Ctrl+Alt+H el TEMP JS pane, Ctrl+Alt+J la TEMP JS Console y Ctrl+Alt+K la TEMP Output Console.
Puedes arrastrar, acoplar y redimensionar las ventanas TEMP exactamente igual que las persistentes. Cada tipo de ventana recuerda por separado su último tamaño (por dispositivo) — un doble clic en la barra de título alterna entre ese tamaño recordado y el predeterminado 380×240. El color, la fuente y el tamaño de cada ventana se ajustan desde el menú del clic derecho.
Cerrar con × ya no borra el contenido — la ventana solo se oculta, y su estado (código, registro, geometría) espera en la sesión hasta que reabres una ventana del mismo tipo. Cuando de verdad quieres empezar de cero, las cabeceras de TEMP CSS y TEMP JS llevan un botón "limpiar" (icono de papelera, el borrado va al historial de deshacer). Los datos de las ventanas TEMP solo desaparecen al cerrar la pestaña — ese es el alcance natural de la sesión.
Panel de edición en ventana aparte
A veces es más cómodo tener el panel de edición junto a la página en lugar de en su lugar. El atajo Ctrl+Alt+I abre el panel en una ventana del navegador aparte, selecciona automáticamente la primera regla activa que coincide con la página actual y se sitúa en la pestaña CSS. Ctrl+Alt+O hace lo mismo para la pestaña JS, y Ctrl+Alt+P para la pestaña Acciones. Si ninguna regla de la página coincide, el panel se abre vacío, listo para crear una nueva.
Usados dentro de un panel ya abierto, los mismos atajos no crean una segunda ventana — cambian la pestaña de la regla activa. La correspondencia se hace por la tecla física, así que los atajos funcionan en cualquier disposición de teclado, incluida la polaca Programmers (AltGr ya no rompe Ctrl+Alt+O).
Entradas de blog relacionadas
Entradas que tratan este tema con más detalle.