← Todos los artículos

Ventanas en el frontend

TEMP pane — ventanas de desarrollo de usar y tirar bajo un atajo Ctrl+Alt

No todo cambio merece una regla permanente. Aterrizas en la página de otra persona, tienes una pregunta para el DOM, o quieres meter un poco de CSS un minuto — eso es todo. Para eso existen los TEMP panes: ventanas invocadas por un atajo en cualquier página, usadas un instante y desaparecidas al recargar. Cero configuración, cero rastro en tus reglas.

En qué se diferencia TEMP de una ventana normal

JustZix tiene cuatro tipos de ventanas en la página — CSS pane, JS pane, JS Console y Output Console. Normalmente las creas en el panel de la extensión y pertenecen a una regla: se guardan, vuelven tras la recarga, se sincronizan entre dispositivos. Genial para lo que usas a diario.

Un TEMP pane es el mismo tipo de ventana, pero efímero. No nace de una regla — nace de un atajo de teclado. Vive en el sessionStorage de la pestaña, así que:

Cuatro atajos

AtajoVentana TEMPPara qué
Ctrl+Alt+GCSS paneedición en vivo del CSS de la página
Ctrl+Alt+HJS panecódigo JS ejecutado a demanda
Ctrl+Alt+JJS ConsoleREPL — escribe, Enter, resultado
Ctrl+Alt+KOutput Consoleobserva el console.log de la página

Los atajos funcionan globalmente — no hace falta pulsar antes en la extensión. Lo pulsas en la página y la ventana está ahí.

Pulsa de nuevo para cerrar — toggle

El atajo es un interruptor. La primera pulsación crea la ventana, la segunda la cierra. Sin riesgo de apilar por error cinco ventanas TEMP CSS una sobre otra — hay como máximo una ventana TEMP por tipo a la vez.

También puedes cerrarla con la × en la cabecera de la ventana, o con el clic derecho en la barra y «Cerrar». Desde la v3.2.2 ambas vías solo ocultan la ventana — el contenido, el log y la geometría esperan en sessionStorage hasta que reabras una ventana del mismo tipo o cierres la pestaña. Esto soluciona un problema anterior de pérdida de datos al pulsar la × por accidente.

El botón «clear» de la cabecera — vaciado controlado (v3.2.3)

Cuando sí quieres vaciar una ventana TEMP CSS o TEMP JS, la cabecera incorpora un botón con un icono de papelera — «clear» — justo al lado del botón ×. El vaciado entra en el historial de deshacer (Ctrl+Z lo restaura) y, en el caso de TEMP CSS, actualiza al instante el <style> activo en la página. Esto separa dos intenciones: ocultar la ventana (×) de vaciar su contenido (papelera).

Desaparecida al recargar — y ese es justo el punto

No es una limitación, es toda la idea. Un TEMP pane existe para que puedas comprobar algo deprisa y no dejar desorden. Has abierto la página de un cliente, pulsado Ctrl+Alt+J, comprobado document.querySelectorAll('.price').length, pulsado F5 — y la página está limpia de nuevo, como si nunca hubieras estado allí.

Si te sorprendes escribiendo el mismo código TEMP por tercera vez — es la señal de convertirlo en una regla permanente.

Un color distinto — no la confundirás con una ventana guardada

Las ventanas persistentes están coloreadas por tipo (verde, ámbar, morado, esmeralda). Las ventanas TEMP reciben una paleta separada — naranja, rojo, rosa, cian — en todo el borde de la ventana, en el acento de la cabecera y en el punto de estado. Un vistazo y sabes que es una ventana efímera, no tu configuración guardada.

Caso de uso 1 — depurar la página ajena sin rastro

Un clásico. Caes en una página que se comporta de forma extraña. Ctrl+Alt+K abre la Output Console — ves qué loguea la página y qué errores lanza. Ctrl+Alt+J abre una JS Console para interrogar el DOM. Hecho — recarga, desaparecida.

Caso de uso 2 — un CSS puntual sin ensuciar las reglas

Quieres desactivar un header sticky cinco minutos porque tapa lo que estás leyendo. Ctrl+Alt+G, escribes header{position:static!important}, lees en paz, cierras. No se ha creado ninguna regla que limpiar después.

Caso de uso 3 — un REPL en producción

Quieres comprobar el comportamiento de la API en una página en vivo. Ctrl+Alt+H abre un TEMP JS pane — pega fetch('/api/...').then(r=>r.json()).then(console.log), ejecútalo con el botón Run, el resultado aterriza en la consola. Tras la recarga el código ha desaparecido — no queda en ninguna regla que alguien pudiera arrancar por error más tarde.

Por qué precisamente G/H/J/K

Son teclas adyacentes de la mano derecha, en estilo clúster Vim — cómodas bajo los dedos. Ctrl+Alt+H/J/K/L sería más natural, pero Ctrl+Alt+L en Linux (GNOME) bloquea la pantalla — el sistema operativo captura el atajo antes de que la extensión lo vea. Así que movimos todo el clúster una tecla a la izquierda. G/H/J/K están libres en todos los navegadores y sistemas operativos extendidos.

Trampas

Mira también

Instala JustZix — y ten cuatro ventanas de desarrollo a un atajo de distancia en cada página.

Valora este artículo

Sin valoraciones — sé el primero.

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso