← Alle Beiträge

Fenster im Frontend

Ein Responsive-Debugging-Overlay: Breakpoints, Überlauf, Grid-Lineal

16 Mai 2026 · von JustZix Team

Der Gerätemodus der DevTools ist großartig, bis er im Weg ist: Er verkleinert deinen Viewport, er ruckelt beim Größenändern, und er kann dir nicht sagen, welches Element diese zermürbende horizontale Scrollleiste verursacht. Dieser Artikel baut ein leichtgewichtiges Responsive-Debugging-Overlay, das du direkt auf die Seite injizierst — ein Live-Größenabzeichen, den Namen des aktiven Breakpoints, einen Alles-umranden-Umschalter, einen Überlauf-Finder und ein Spalten-Lineal. Kombiniere es mit dem JustZix-CSS-Bereich, und du kannst einen Bug erkennen und im selben Fenster beheben.

Warum ein Overlay auf der Seite den Gerätemodus schlägt

Der Gerätemodus beantwortet „Wie sieht das bei 375px aus?" — aber die meisten Responsive-Bugs gehen nicht um eine bestimmte Breite, sie gehen um die Übergänge: ein Rand, der nicht kollabiert, ein Bild mit fester Breite, ein Flex-Kind, das sich weigert zu schrumpfen. Dafür willst du dein echtes Browser-Fenster ziehen und Zahlen live ändern sehen. Ein injiziertes Overlay gibt dir das, bei nativer Performance, ohne dass Browser-Bedienelemente Pixel stehlen.

Alles unten ist eine JS-Regel. Injiziere sie einmal; das Overlay aktualisiert sich selbst, während du die Größe änderst.

Das Live-Viewport-Abzeichen

Fang mit einem fixen Abzeichen an, das die aktuelle Viewport-Breite und -Höhe zeigt und bei jeder Größenänderung aktualisiert.

(() => {
  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();

Das Abzeichen sitzt unten links, ignoriert Pointer-Events, sodass es nie einen Klick blockiert, und reitet auf einem z-index, der hoch genug ist, um fast jede Seite zu überragen.

Den aktiven Breakpoint benennen

Eine rohe Pixelzahl ist nützlich, aber „sind wir im Tablet-Bereich?" ist die Frage, die du tatsächlich stellst. Bilde Breiten auf Namen ab — passe die Tabelle an das Framework der Seite an (das sind die Tailwind-Standardwerte).

  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';
  }

Jetzt liest das Abzeichen etwas wie 1024 × 768px · lg — und in dem Moment, in dem du über eine Breakpoint-Grenze ziehst, springt der Name um. Diese sofortige Rückmeldung ist der ganze Sinn.

Jedes Element umranden

Der klassische „Alles umranden"-Trick legt das Box-Modell der ganzen Seite offen — du siehst sofort streunende Ränder, falsch ausgerichtete Spalten und versehentliche Verschachtelung. Mach es zu einem Umschalter, damit es nicht im Weg ist.

  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();
  });

outline statt border zu nutzen ist wichtig — Umrandungen nehmen keinen Platz ein, also löst das Umschalten keinen Reflow des Layouts aus, das du inspizieren willst.

Der Finder für horizontalen Überlauf

Das ist das Feature, das den ganzen Artikel wert ist. Eine seitliche Scrollleiste bedeutet, dass ein Element breiter als der Viewport ist — aber welches? Durchlaufe jedes Element und markiere jedes, dessen rechte Kante über document.documentElement.clientWidth hinausragt.

  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();
  });

Drück f und jedes störende Element bekommt eine magentafarbene Umrandung; die Liste landet auch in der Output Console, sodass du jeden Knoten inspizieren kannst. Meist ist es ein Element — ein Bild fester Breite, eine ununterbrochene lange Zeichenkette, ein negativer Rand — und jetzt weißt du genau, welches.

Ein Spalten-/Grid-Lineal

Um zu prüfen, ob Inhalt an einem Raster ausgerichtet ist, leg gleichmäßig verteilte Spalten darüber. Das zeichnet ein 12-Spalten-Lineal mit Zwischenräumen über den 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();
  });
})();

Passe maxWidth, gap und Spaltenanzahl an das tatsächliche Raster der Seite an. Jetzt siehst du auf einen Blick, ob Überschriften, Karten und Bilder an dieselben Linien einrasten — oder ein paar Pixel abdriften.

Die volle Tastaturbelegung

• o — Alles-umranden umschalten.
• f — Übeltäter des horizontalen Überlaufs finden.
• g — das 12-Spalten-Grid-Lineal umschalten.
• Das Größenabzeichen aktualisiert bei jeder Größenänderung, ohne Taste.

Behalte die Modifier-Prüfungen (!e.metaKey && !e.ctrlKey), damit die Kürzel nicht mit Browser-Befehlen kollidieren. Lauscht die Seite selbst auf einfache Buchstabentasten, wechsle zu etwas wie Alt+O.

Es mit dem CSS-Bereich kombinieren

Dieses Overlay sagt dir, was falsch ist; der JustZix-CSS-Bereich lässt dich es beheben, ohne den Tab zu verlassen. Der Workflow:

1. Injiziere das Overlay aus dem JS-Bereich und führe es aus.
2. Zieh dein Fenster über Breakpoints, beobachte das Abzeichen.
3. Siehst du eine Scrollleiste auftauchen? Drück f, bekomme den Übeltäter.
4. Öffne den CSS-Bereich und flicke es live — max-width: 100%, overflow-wrap: anywhere, was auch immer es braucht.
5. Sieht es richtig aus, speichere das CSS in der Regel, damit der Fix bleibt.

Siehe auch

• Ein Live-Barrierefreiheits-Audit-Overlay — derselbe Overlay-auf-der-Seite-Ansatz für Barrierefreiheit.
• Ein eigenes Druck-Stylesheet für bessere PDFs — Layout für ein anderes Medium beheben.

Hör auf, mit dem Gerätemodus um Bugs zu kämpfen, die er nicht diagnostizieren kann. Installiere JustZix, injiziere das Overlay und debugge Responsive-Layouts in deinem echten Browser bei voller Geschwindigkeit.