Un mini-IDE en una pestaña del navegador: 8 herramientas JustZix que sustituyen a las DevTools
JustZix nació como extensión para la inyección de CSS — pero en el último año ha crecido hasta convertirse en algo mucho más grande. Hoy es un mini-IDE en cada pestaña del navegador — 4 tipos de ventanas (panes), 6 tipos de acción, 2 namespaces de API JS y un sistema de snap connections para disponerlos todos en un dashboard coherente por dominio. Sin F12. Sin DevTools. Todo en la pestaña misma. Este artículo mapea el cuadro entero — qué usar cuándo, cómo encaja, por dónde empezar.
El mapa: 4 + 6 + 2 + 1
JustZix se divide en cuatro componentes principales que puedes usar juntos o por separado:
| Componente | Qué hace | Número de tipos |
|---|---|---|
| Reglas CSS/JS | Inyecta <style> / <script> al match de URL — auto-run | 2 (CSS, JS) |
| Acciones de la barra | Botones en una barra flotante — invocación manual | 6 (BUTTON, SELECT, INPUT, TEXTAREA, SLIDER, TOGGLE3) |
| Ventanas en el frontend | Paneles flotantes con su propia lógica por pane | 4 (CSS pane, JS pane, JS Console, Output Console) |
| Helpers JS | Acceso programático — namespaces en el MAIN world | 2 (window.JZ, window.JUSTZIX) |
Además las snap connections como «pegamento» — permiten disponer los paneles y la barra de acciones en grupos que se mueven juntos.
Ventanas en el frontend — 4 tipos
1. CSS pane — editor CSS en tiempo real en la pestaña
Abre un panel junto a la página, escribes CSS, ves los cambios en vivo. Auto-save en la pestaña. Persistente por pestaña mediante sessionStorage. Sin commit en ningún sitio, muere con la pestaña. Perfecto para «necesito ver cómo se verían los botones en otro color, pero todavía no lo estoy desplegando».
→ CSS pane: un editor CSS en tiempo real en cualquier página, sin DevTools
2. JS Console — REPL con historial ↑↓
La alternativa REPL a las DevTools. Eval Ctrl+Enter. Las flechas arriba/abajo recorren el historial (sessionStorage por pestaña). La salida captura solo el sync — las tareas async acaban directamente en las DevTools. Perfecto para comprobaciones ad-hoc («¿cuántos elementos tienen la clase X?», «¿qué devuelve esta API?»).
→ JS Console: REPL en cualquier página, sin DevTools
3. JS pane — scripts Run-on-demand
Código JS persistente con un botón ▶. Ctrl+Enter lo ejecuta. Estado dirty (pista visual de que tienes cambios sin ejecutar). Overlay de error (barra roja en el pane sin F12). Perfecto para scripts destructivos («vaciar el carrito», «eliminar el borrador», «resetear el formulario») — no quieres que se auto-ejecuten, quieres pulsar ▶ a demanda.
→ JS pane: scripts Run-on-demand, sin auto-run en cada visita
4. Output Console — visor de logs de solo lectura
El 4.º tipo de ventana — escuchar, no escribir. Captura todos los console.log/warn/error/info/debug de la página (sync + async) más el canal window.JUSTZIX.log() dedicado. viewMode [C/J/C+J] conmuta la visibilidad. Filtros por nivel, campo de búsqueda. 2000 líneas. Inmune a la CSP (privilegios de la extensión).
→ Output Console: observar el console.log de la página en un panel de la pestaña
Tipos de acción — 6 en la barra de acciones
La barra de acciones es una barra flotante de botones que invocas manualmente. Seis tipos de acción — todos viven en la misma barra, cada uno con su propia semántica:
| Tipo | UX | Memory del estado activo |
|---|---|---|
| BUTTON | Clic único → ejecuta código | Ninguna — fire-and-forget |
| SELECT static | Dropdown de 2-N opciones | Sí (dataset) |
| SELECT js | Dropdown con opciones generadas por JS | Sí (<select> nativo) |
| INPUT | Campo de texto de una línea + Enter→run | Sí (por pestaña) |
| TEXTAREA | Texto multilínea + blur→run | Sí (por pestaña) |
| TOGGLE3 | Segmented control de 3 estados | Sí (idx 0/1/2) |
| SLIDER | Slider de rango (eventos input + change) | Sí (Number) |
TOGGLE3 — segmented control de 3 estados
Segmented control con exactamente 3 estados. Cada estado recibe su propia label, value, color y código JS. Mejor caso de uso: switcher de entorno Dev/Staging/Prod (cada estado = subdominio distinto), override del tema Light/Dark/Auto, feature flag de tres estados Off/Default/Force-on. 5 colores configurables (bg/texto activo + bg/hover/texto inactivo).
→ TOGGLE3: segmented control de 3 estados en la barra de acciones
SLIDER — un controlador de variables CSS al alcance del dedo
<input type="range"> nativo en la barra. Drag en vivo = guarda la memory (sin ejecutar el código), al soltar = ejecuta el código con value como Number. 4 colores separados (bg, relleno, texto de la label, texto del value). Caso de uso: controlador de brillo (filter:brightness 50-150%), tamaño de la fuente para la accesibilidad, throttle de la velocidad de animación para el debug, cualquier variable CSS que quieras girar como un fader físico.
→ SLIDER: un controlador de variables CSS en la pestaña
API — dos namespaces, dos roles
JustZix instala dos namespaces separados en el MAIN world. Cada uno tiene su propósito y ciclo de vida — deliberadamente no se mezclan:
window.JUSTZIX(logger) — alias primario desde v2.13.76. Nombre de marca = riesgo de colisión despreciable con los scripts de la página.JUSTZIX.log/.warn/.error/.info/.debughace dispatch hacia la Output Console (kind='jz'); NO reenvía a la consola nativa. Alias:window.__JUSTZIX__(siempre),window.JZ(solo cuando está libre).window.JZ(helpers para las acciones) — opera sobre elementosdata-jz-action-iddel DOM.JZ.click(label)/JZ.value(label)/JZ.setValue(label, v)/JZ.action(label). Puede estar ocupado por la página (Google Ads tiene su propio window.JZ) → fallback:document.querySelector('[data-jz-action-id="..."]')nativo.
→ window.JZ + window.JUSTZIX: API programática + logger
Snap connections — disponer en dashboard
Seis tipos de elementos (4 tipos de pane + barra de acciones + botón flotante) viven en un espacio de IDs compartido. Arrastra uno dentro de ≤20px de otro → se enganchan en un grupo. Arrastra el grupo → todo se mueve junto. El posicionamiento por anchor (TL/TR/BL/BR) mantiene el layout estable durante los redimensionados de la ventana. Esto transforma «algunas herramientas separadas» en «un dashboard configurable por dominio».
→ Snap connections: grupos de paneles — un mini-dashboard en la pestaña
Cómo juntarlo todo — 3 setups prácticos
Setup A: «toolbar QA personal»
Arriba a la derecha, anchor TR:
- Barra de acciones: 3-4 BUTTON para los flujos más comunes («Login as test user», «Fill demo data», «Reset cart»)
- JS pane bajo la barra: scripts destructivos / operaciones en masa (Run-on-demand, ▶)
- Output Console bajo el JS pane: monitoriza JUSTZIX.log + la consola de la página
- Todo enganchado verticalmente. F5 → vuelve a los mismos sitios.
Setup B: «editor CSS en tiempo real»
Lado izquierdo, anchor TL:
- CSS pane (estrecho, alto): edición en vivo
- Barra de acciones con un SLIDER «Brightness» + un TOGGLE3 «Theme»
- Snap borde con borde — slider + editor CSS en un único stream
Setup C: «overlay de debug»
Barra abajo, anchor BL:
- Barra de acciones con un BUTTON «Capture state» + un TOGGLE3 «Env DEV/STG/PROD»
- Output Console estrecha sobre la barra (altura ~200px): logs en streaming sin parar
- Parece un panel DevTools del navegador, pero es parte de la pestaña (no desaparece cuando minimizas F12)
El primer minuto — qué hacer justo después de la instalación
- Instala JustZix (Descarga aquí). Pulsa el icono en la barra de herramientas tras la instalación.
- Crea tu primera regla en las opciones (extensiones → opciones JustZix). Elige «en todas partes» como scope.
- En el editor CSS escribe:
body { background: lightyellow !important; }— guarda. Visita cualquier sitio → el fondo se vuelve amarillo. - Añade una acción BUTTON a esta regla: label «🐛 Debug», código
JUSTZIX.log('debug'); - Añade una Output Console en la sección «Ventanas» → guarda. Vuelve a la página. Clic «🐛 Debug» → una línea en la Output Console.
- Arrastra la Output Console bajo la barra de acciones, déjala engancharse. Tienes tu primer mini-dashboard.
3 minutos de cero a un setup funcional. Todo persistente — F5 / nueva pestaña / reinicio del navegador: el setup vuelve.
Lista completa de los artículos por componente
Si quieres conocimiento más profundo sobre los componentes individuales:
- Ventanas en el frontend: CSS pane · JS Console · JS pane · Output Console · Snap connections
- Tipos de acción: TOGGLE3 · SLIDER
- API y helpers: window.JZ + JUSTZIX helpers
- Tutoriales prácticos: Oculta los banners de cookies · Modo oscuro para cualquier sitio · Depurar GTM sin dev · Atajos de teclado personalizados · Toolbar QA desde cero · Marcadores de entorno
JustZix es una extensión open-source, completamente gratuita, sin cuenta, sin servidor. Todo corre localmente en el navegador. Instálala y construye tu primer mini-IDE en 3 minutos.
Valora este artículo
Sin valoraciones — sé el primero.