← Todos los ejemplos

Etsy: alternar contornos de componentes

Dibuja finos contornos rojos alrededor de tarjetas y componentes para inspeccionar el diseño.

Código para copiar

// Toggle debug outlines around every listing card and component
const ID = 'jz-ety-debug-outline';
const old = document.getElementById(ID);
if (old) { old.remove(); }
else {
  const s = document.createElement('style');
  s.id = ID;
  s.textContent = '.listing-card,[data-listing-id],'
    + '[data-appears-component-name]'
    + '{outline:1px solid rgba(220,50,50,0.6)!important}';
  document.head.appendChild(s);
}

Cómo usar este ejemplo

1. Copia el código con el botón de arriba.
2. Instala JustZix (2 minutos) y abre la extensión en la página de destino.
3. Añade una nueva regla que coincida con esa página.
4. Activa el panel de acciones, añade un botón en la pestaña Acciones y pega el código en él — lo ejecutas con un clic.