← Todos los artículos

Ventanas en el frontend

JS pane: scripts Run-on-demand, sin auto-run en cada visita

15 mayo 2026 · por JustZix Team

Una regla JS de JustZix corre automáticamente cuando la URL coincide. Genial para las cosas que siempre deben funcionar — saltar automáticamente los banners de cookies, atajos personalizados. Pero algunos scripts son destructivos: «vaciar el carrito», «eliminar el borrador del correo», «resetear el formulario». Esos no los quieres en auto-run. Quieres pulsar ▶ solo cuando quieres. Eso es un JS pane (v2.13.56+).

Tres ventanas JS — cuál para qué

Un JS pane se parece casi a un CSS pane (textarea, arrastrable, punto coloreado), pero tiene un botón ▶ Run adicional en la cabecera. El código vive en el textarea, nunca se auto-ejecuta — la única excepción es el resume tras la recarga (si había algo en el sessionStorage antes de F5, JustZix lo vuelve a ejecutar para restaurar el estado anterior al refresh).

Primer uso

1. Opciones de JustZix → carpeta/grupo/regla → «Ventanas» → «+ JS pane».
2. Nombre: «Vaciar el carrito», color: ámbar (predeterminado #D65D0E).
3. Visita shop.com/cart. El pane aparece arriba a la derecha con una cabecera («• Vaciar el carrito [▶]») y un textarea vacío.
4. Escribe:

   document.querySelectorAll('.cart-item .remove-btn')
     .forEach(btn => btn.click());

5. Ctrl+Enter (o clic ▶). Todos los botones «Eliminar» pulsados.

Estado dirty — sabes visualmente que hay un cambio

Tras escribir / modificar el código, mientras no lo ejecutes (o vuelvas a la última versión ejecutada), el botón Run muestra un estado «dirty» (con un runColor personalizado — desde v2.13.64 puedes elegir el tuyo). Es una señal visual: «tienes cambios sin ejecutar».

Clic ▶ → el código se ejecuta, el estado dirty desaparece. Devuelve el textarea a un valor anterior → dirty reaparece. JustZix compara el contenido actual con el.dataset.jzLastRun.

Overlay de error — no hacen falta las DevTools abiertas

Cuando el eval lanza una excepción, en la parte baja del pane aparece una barra roja (.jz-pane-error):

Error JS: Cannot read properties of null (reading 'click')

Pulsa de nuevo ▶ con el código corregido → el error desaparece. Sin abrir y cerrar F12. Para los errores async (un setTimeout(...) que lanza) el overlay no los captura — límite conocido, los errores async hay que rastrearlos mediante las DevTools o la JS Console de JustZix.

Persistente vs efímero — qué escenario

El contenido de un JS pane persiste en sessionStorage['jz_pane_{id}_content'] por pestaña. Consecuencias:

• F5 / navegación en la pestaña — el pane se vuelve a montar, el textarea relee el código, el auto-resume lo vuelve a ejecutar. El estado de la página tras la recarga = estado tras la primera ejecución.
• Nueva pestaña en el mismo dominio — el pane aparece vacío. Cada pestaña tiene su propio sessionStorage.
• Cerrar la pestaña — el contenido del pane se pierde. La definición del pane en sí (nombre, color, scope) permanece porque es chrome.storage, pero el textarea vuelve a vaciarse.

Si quieres código permanente (incluso tras cerrar la pestaña) — no es un pane, es una regla JS. Pane = bloc de notas con un botón Run.

Caso de uso 1 — acciones destructivas específicas de un estado

Limpieza en un panel de administración de una tienda. Acción «Eliminar todos los productos demo del carrito»:

// Corre solo cuando pulsas ▶. Auto-run = desastre.
if (!location.href.includes('/admin/demo')) {
  throw new Error('Solo para /admin/demo');
}
const rows = document.querySelectorAll('tr.product');
console.log(`Eliminando ${rows.length} productos...`);
for (const row of rows) {
  await fetch('/api/products/' + row.dataset.id, { method: 'DELETE' });
  row.remove();
}
console.log('Hecho.');

Defensa: guarda en la URL + nombre del pane «CLEANUP DEMO» + punto ámbar. Difícil de hacer por error.

Caso de uso 2 — operaciones en masa

50 usuarios deben marcarse como «verificados». La UI permite el clic-por-usuario. JS pane:

const rows = document.querySelectorAll('.user-row:not(.verified)');
let count = 0;
for (const row of rows) {
  row.querySelector('.btn-verify')?.click();
  await new Promise(r => setTimeout(r, 200));  // throttle para que la API no proteste
  count++;
}
console.log(`${count} usuarios verificados.`);

Un clic ▶, 50 usuarios. 200 ms de sleep para no inundar la API. Tres veces más rápido que el verdadero endpoint bulk que no existe.

Caso de uso 3 — demo con script

Le estás mostrando a un cliente el flujo «añadir 3 productos + ir al checkout + rellenar datos de prueba». 30 segundos cada vez. Un script de pane lo hace todo en 2 segundos:

// Flujo demo
[1, 2, 3].forEach(i => document.querySelector(`[data-product-id="${i}"] .add-btn`)?.click());
await new Promise(r => setTimeout(r, 500));
document.querySelector('.checkout-btn').click();
await new Promise(r => setTimeout(r, 1000));
Object.entries({
  email: 'demo@example.com', name: 'Demo', address: 'Test 1'
}).forEach(([k, v]) => {
  const el = document.querySelector(`[name="${k}"]`);
  if (el) { el.value = v; el.dispatchEvent(new Event('input', { bubbles: true })); }
});

El cliente ve un flujo «piloto automático». Profesional. Sin escribir en tiempo real.

Trampas

• Los errores async no aparecen en el overlay — setTimeout(() => { throw new Error('x') }, 100) acaba en la consola global, no en la caja de error del pane. Workaround: envuelve try/catch dentro de funciones async.
• El resume tras la recarga puede sorprenderte — si ayer escribiste algo destructivo, la recarga de hoy lo vuelve a ejecutar. Best practice: los panes que no quieres que se auto-reanuden → vacía el contenido antes de cerrar la pestaña (Ctrl+A, Supr, ▶ en vacío = resetea jzLastRun).
• El top-level await NO funciona. Envuélvelo en una IIFE: (async () => { await ... })().
• Acceso al MAIN world — el JS pane corre en el contexto de la página (vía chrome.scripting.executeScript world=MAIN), así que ve las globales de la página (React, store Redux, jQuery, etc.). Como las reglas JS.

Qué hacer después

El JS pane es el 2.º tipo de «ventana en la página» de JustZix. Hemos escrito antes sobre el CSS pane (editor CSS en tiempo real) y sobre la JS Console (REPL). Los tres juntos son un mini-IDE directamente en la pestaña del navegador, con scope por dominio.

Instala JustZix y obtén scripts Run-on-demand en cada página, sin el riesgo del auto-run.