Una capa de depuración responsive: breakpoints, desbordamiento, regla de rejilla

16 mayo 2026 · por JustZix Team

El modo dispositivo de DevTools es genial hasta que estorba: encoge tu viewport, se ralentiza al redimensionar y no puede decirte qué elemento está causando esa exasperante barra de scroll horizontal. Este artículo construye una capa ligera de depuración responsive que inyectas directamente en la página — una insignia de tamaño en vivo, el nombre del breakpoint activo, un conmutador de contornear-todo, un buscador de desbordamiento y una regla de columnas. Combínala con el panel CSS de JustZix y podrás detectar un bug y arreglarlo en la misma ventana.

Por qué una capa en la página supera al modo dispositivo

El modo dispositivo responde a «¿cómo se ve esto a 375px?» — pero la mayoría de los bugs responsive no son sobre un ancho concreto, son sobre las transiciones: un margen que no colapsa, una imagen con un ancho fijo, un hijo flex que se niega a encogerse. Para esos quieres arrastrar tu ventana de navegador real y ver los números cambiar en vivo. Una capa inyectada te da eso, con rendimiento nativo, sin que ningún adorno te robe píxeles.

Todo lo de abajo es una regla JS. Inyéctala una vez; la capa se actualiza sola mientras redimensionas.

La insignia de viewport en vivo

Empieza con una insignia fija que muestre el ancho y el alto actuales del viewport y se actualice en cada redimensionado.

(() => {
  document.getElementById('jz-resp')?.remove();

  const bar = document.createElement('div');
  bar.id = 'jz-resp';
  Object.assign(bar.style, {
    position: 'fixed', left: '10px', bottom: '10px',
    font: '12px/1.5 ui-monospace, monospace',
    background: '#111', color: '#fff',
    padding: '6px 10px', borderRadius: '6px',
    zIndex: 2147483600, pointerEvents: 'none',
    whiteSpace: 'pre',
  });
  document.body.appendChild(bar);

  function update() {
    const w = window.innerWidth;
    const h = window.innerHeight;
    bar.textContent = w + ' × ' + h + 'px  ·  ' + bpName(w);
  }
  window.addEventListener('resize', update);
  update();

La insignia se sitúa abajo a la izquierda, ignora los eventos de puntero para no bloquear nunca un clic y monta un z-index suficientemente alto para superar casi cualquier sitio.

Nombrar el breakpoint activo

Un conteo de píxeles en bruto es útil, pero «¿estamos en el rango de tablet?» es la pregunta que realmente haces. Mapea anchos a nombres — ajusta la tabla para que coincida con el framework del sitio (estos son los valores por defecto de Tailwind).

  function bpName(w) {
    if (w >= 1536) return '2xl';
    if (w >= 1280) return 'xl';
    if (w >= 1024) return 'lg';
    if (w >= 768)  return 'md';
    if (w >= 640)  return 'sm';
    return 'xs';
  }

Ahora la insignia muestra algo como 1024 × 768px · lg — y en el momento en que arrastras a través de un límite de breakpoint, el nombre cambia. Ese feedback instantáneo es todo el sentido.

Contornear cada elemento

El clásico truco de «contornear todo» expone el modelo de caja de toda la página — ves de inmediato márgenes sueltos, columnas desalineadas y anidamientos accidentales. Hazlo un conmutador para que no estorbe.

  let outlined = false;
  const styleEl = document.createElement('style');
  document.head.appendChild(styleEl);

  function toggleOutline() {
    outlined = !outlined;
    styleEl.textContent = outlined
      ? '* { outline: 1px solid rgba(255,0,0,.35) !important; }'
      : '';
  }

  // Press 'o' to toggle outlines
  window.addEventListener('keydown', e => {
    if (e.key === 'o' && !e.metaKey && !e.ctrlKey) toggleOutline();
  });

Usar outline en lugar de border importa — los contornos no ocupan espacio, así que conmutarlos no provoca un reflujo de la maquetación que intentas inspeccionar.

El buscador de desbordamiento horizontal

Esta es la función que vale el artículo entero. Una barra de scroll lateral significa que algún elemento es más ancho que el viewport — pero ¿cuál? Recorre cada elemento y señala cualquiera cuyo borde derecho rebase document.documentElement.clientWidth.

  function findOverflow() {
    document.querySelectorAll('.jz-of').forEach(n => {
      n.classList.remove('jz-of');
      n.style.outline = '';
    });

    const limit = document.documentElement.clientWidth;
    const culprits = [];

    document.querySelectorAll('*').forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.right > limit + 1 || r.left < -1) {
        culprits.push(el);
        el.classList.add('jz-of');
        el.style.outline = '3px solid #f0f';
      }
    });

    console.log('%c' + culprits.length + ' overflowing element(s)',
      'color:#f0f');
    console.log(culprits);
    return culprits;
  }

  // Press 'f' to find overflow
  window.addEventListener('keydown', e => {
    if (e.key === 'f' && !e.metaKey && !e.ctrlKey) findOverflow();
  });

Pulsa f y cada elemento infractor recibe un contorno magenta; la lista también aterriza en la Consola de Salida para que puedas inspeccionar cada nodo. Normalmente es un solo elemento — una imagen de ancho fijo, una cadena larga sin cortes, un margen negativo — y ahora sabes exactamente cuál.

Una regla de columnas / rejilla

Para comprobar que el contenido se alinea a una rejilla, superpón columnas espaciadas de forma uniforme. Esto dibuja una regla de 12 columnas con canalones a lo largo del viewport.

  function toggleRuler() {
    let ruler = document.getElementById('jz-ruler');
    if (ruler) { ruler.remove(); return; }

    ruler = document.createElement('div');
    ruler.id = 'jz-ruler';
    Object.assign(ruler.style, {
      position: 'fixed', inset: '0',
      display: 'grid', gap: '16px',
      gridTemplateColumns: 'repeat(12, 1fr)',
      maxWidth: '1200px', margin: '0 auto',
      padding: '0 16px',
      zIndex: 2147483500, pointerEvents: 'none',
    });
    for (let i = 0; i < 12; i++) {
      const col = document.createElement('div');
      col.style.background = 'rgba(0, 120, 255, .12)';
      ruler.appendChild(col);
    }
    document.body.appendChild(ruler);
  }

  // Press 'g' to toggle the grid ruler
  window.addEventListener('keydown', e => {
    if (e.key === 'g' && !e.metaKey && !e.ctrlKey) toggleRuler();
  });
})();

Haz coincidir maxWidth, gap y el número de columnas con la rejilla real del sitio. Ahora puedes ver de un vistazo si los encabezados, las tarjetas y las imágenes encajan en las mismas líneas — o se desvían unos pocos píxeles.

El mapa de teclado completo

o — conmuta el contornear-todo.
f — encuentra a los culpables del desbordamiento horizontal.
g — conmuta la regla de rejilla de 12 columnas.
La insignia de tamaño se actualiza en cada redimensionado, sin necesidad de tecla.

Mantén las comprobaciones de modificador (!e.metaKey && !e.ctrlKey) para que los atajos no choquen con los comandos del navegador. Si el propio sitio escucha pulsaciones de letras simples, cambia a algo como Alt+O.

Combinarlo con el panel CSS

Esta capa te dice qué está mal; el panel CSS de JustZix te deja arreglarlo sin salir de la pestaña. El flujo:

Inyecta la capa desde el panel JS y ejecútala.
Arrastra tu ventana a través de los breakpoints, observando la insignia.
¿Aparece una barra de scroll? Pulsa f, obtén el culpable.
Abre el panel CSS y parchéalo en vivo — max-width: 100%, overflow-wrap: anywhere, lo que necesite.
Cuando se vea bien, guarda el CSS en la regla para que el arreglo perdure.

Mira también

Una capa de auditoría de accesibilidad en vivo — el mismo enfoque de capa en la página para a11y.
Una hoja de estilos de impresión personalizada para mejores PDF — arreglar la maquetación para un medio distinto.

Deja de pelear con el modo dispositivo por bugs que no puede diagnosticar. Instala JustZix, inyecta la capa y depura maquetaciones responsive en tu navegador real a toda velocidad.

Valora este artículo

Sin valoraciones — sé el primero.