← Todos los artículos

Tutoriales

Marcadores de entorno DEV/STAGING/PROD — 5 maneras de dejar de destruir producción

15 mayo 2026 · por JustZix Team

Pulsas «Eliminar todas las cuentas» pensando que estás en staging. Era producción. Le pasa a todo DevOps e ingeniero al menos una vez. Cinco técnicas de marcado visual del entorno para que no vuelvas a caer en esa trampa.

Método 1 — banner rojo arriba

El más evidente y el más eficaz. Una franja en lo alto de cada página, imposible de ignorar:

body::before {
  content: "ENTORNO DEV — los datos podrían no ser de producción";
  position: fixed;
  top: 0; left: 0; right: 0;
  background: repeating-linear-gradient(
    -45deg, #dc2626, #dc2626 12px, #b91c1c 12px, #b91c1c 24px
  );
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  font: 700 13px/1.4 ui-monospace, monospace;
  letter-spacing: .5px;
  z-index: 999999;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Padding del body para que el contenido no quede bajo el banner */
body { padding-top: 32px !important; }

El degradado repetido crea un motivo «cinta de seguridad» como en las obras — por evolución, significa peligro. Sin el degradado sería una barra informativa normal; con él, nadie lo ignora.

Método 2 — badge flotante en la esquina

El banner de arriba es agresivo y ocupa espacio. A veces quieres algo más sutil — un pequeño badge de esquina:

body::after {
  content: "DEV";
  position: fixed;
  bottom: 16px; left: 16px;
  background: #dc2626;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font: 700 12px ui-monospace, monospace;
  letter-spacing: 1px;
  z-index: 999999;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .4);
  pointer-events: none; /* no bloquear los clics */
}

Fijado a la esquina, visible pero discreto. pointer-events: none es crucial — sin él, el badge bloquearía los botones que tiene debajo.

Método 3 — cambiar la favicon

Un banner solo ayuda cuando miras la página. La pestaña del navegador es visible incluso después de Cmd+Tab. Cambia la favicon:

// Generar una nueva favicon (círculo rojo con la letra D)
const canvas = document.createElement('canvas');
canvas.width = 32; canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#dc2626';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('D', 16, 17);

// Eliminar las favicons antiguas
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());

// Añadir la nueva
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);

D roja en la pestaña, siempre visible. Funciona también en los marcadores — los marcadores de staging vs producción se vuelven trivialmente distinguibles.

Método 4 — tinte sutil del viewport

El más elegante — un ligero overlay coloreado que da a toda la página un tinte apenas perceptible:

/* Tinte naranja para STAGING, rojo para DEV */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(245, 158, 11, .04);
  pointer-events: none;
  z-index: 999998;
  mix-blend-mode: multiply;
}

rgba(..., .04) = casi invisible, pero después de unos segundos el cerebro sabe «algo es distinto». Después de unos días lo notas al instante. Sin la agresividad de un banner.

Método 5 — prefijo en el título de la pestaña

La pestaña del navegador muestra document.title. Añade un prefijo:

// Prefijo del título + atención a las SPA que lo cambian dinámicamente
const PREFIX = '[DEV] ';

function ensurePrefix() {
  if (!document.title.startsWith(PREFIX)) {
    document.title = PREFIX + document.title;
  }
}

ensurePrefix();

// Las SPA cambian a menudo el título al cambiar de ruta
new MutationObserver(ensurePrefix)
  .observe(document.querySelector('title'), { childList: true });

El MutationObserver captura las SPA que reescriben el título al cambiar de ruta. Sin el observer, el prefijo desaparece tras la primera navegación.

Trampas

• No lo apliques en producción — el patrón de URL debe ser estrecho: https://staging.*, https://*-dev.*, http://localhost:*. No *.
• Conflicto de z-index — algunos banners de cookies o modales usan z-index 9999. Tus marcadores deben ser más altos (999999 debería bastar).
• Hoja de estilo para impresión — el banner aparecerá en un PDF impreso. Añade @media print { body::before { display: none } } para saltarlo.
• iframe — una página incrustada en un iframe no hereda el CSS del padre. El patrón de URL debe coincidir también con el contenido del iframe para que el marcador aparezca dentro.

Cómo conectarlo a JustZix

1. Instala JustZix.
2. Carpeta «Marcadores de entorno». Regla por entorno:
   • Patrón https://*-staging.company.com/* → Método 1 (banner) + Método 3 (favicon).
   • Patrón http://localhost:*/* → Método 2 (badge) + Método 5 (prefijo del título).
3. Enlace de compartición a todo el equipo — todos tienen los mismos marcadores de entorno.

Instala JustZix gratis y deja de destruir producción por «clics accidentales».