← Wszystkie wpisy

Okna na froncie

Nakładka do debugowania responsywności: breakpointy, overflow, linijka siatki

16 maja 2026 · autor JustZix Team

Tryb urządzenia w DevTools jest świetny, dopóki nie przeszkadza: zmniejsza Twój viewport, tnie się przy zmianie rozmiaru i nie potrafi powiedzieć, który element wywołuje ten irytujący poziomy pasek przewijania. Ten artykuł buduje lekką nakładkę do debugowania responsywności, którą wstrzykujesz prosto na stronę — plakietkę rozmiaru na żywo, nazwę aktywnego breakpointu, przełącznik konturowania wszystkiego, wyszukiwarkę overflow i linijkę kolumn. Połącz ją z panelem CSS w JustZix, a będziesz mógł wykryć błąd i naprawić go w tym samym oknie.

Dlaczego nakładka na stronie bije tryb urządzenia

Tryb urządzenia odpowiada na „jak to wygląda przy 375px?” — ale większość błędów responsywności nie dotyczy konkretnej szerokości, dotyczy przejść: marginesu, który się nie zwija, obrazu o stałej szerokości, dziecka flex, które odmawia skurczenia się. Do tego chcesz przeciągać prawdziwe okno przeglądarki i patrzeć, jak liczby zmieniają się na żywo. Wstrzyknięta nakładka daje Ci to, przy natywnej wydajności, bez chrome kradnącego piksele.

Wszystko poniżej to jedna reguła JS. Wstrzyknij ją raz; nakładka aktualizuje się sama, gdy zmieniasz rozmiar.

Plakietka viewportu na żywo

Zacznij od stałej plakietki, która pokazuje bieżącą szerokość i wysokość viewportu i aktualizuje się przy każdej zmianie rozmiaru.

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

Plakietka siedzi w lewym dolnym rogu, ignoruje zdarzenia wskaźnika, więc nigdy nie blokuje kliknięcia, i jedzie na z-index wystarczająco wysokim, by przebić niemal każdą stronę.

Nazywanie aktywnego breakpointu

Surowa liczba pikseli jest przydatna, ale „czy jesteśmy w zakresie tabletu?” to pytanie, które faktycznie zadajesz. Zmapuj szerokości na nazwy — dostosuj tabelę, aby pasowała do frameworka strony (to są domyślne wartości 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';
  }

Teraz plakietka pokazuje coś w stylu 1024 × 768px · lg — i w momencie, gdy przeciągniesz przez granicę breakpointu, nazwa się zmienia. Ten natychmiastowy feedback to cały sens.

Konturuj każdy element

Klasyczna sztuczka „konturuj wszystko” odsłania model pudełkowy całej strony — od razu widzisz zabłąkane marginesy, niewyrównane kolumny i przypadkowe zagnieżdżenia. Zrób z tego przełącznik, aby nie przeszkadzało.

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

Użycie outline zamiast border ma znaczenie — kontury nie zajmują miejsca, więc ich przełączanie nie powoduje przepływu układu, który próbujesz zbadać.

Wyszukiwarka poziomego overflow

To funkcja warta całego artykułu. Boczny pasek przewijania oznacza, że jakiś element jest szerszy niż viewport — ale który? Przejdź przez każdy element i oflaguj każdy, którego prawa krawędź wykracza poza 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();
  });

Wciśnij f, a każdy problematyczny element dostaje magentowy kontur; lista trafia też do Output Console, abyś mógł zinspekcjonować każdy węzeł. Zwykle jest to jeden element — obraz o stałej szerokości, niełamiący się długi ciąg znaków, ujemny margines — i teraz wiesz dokładnie który.

Linijka kolumn / siatki

Aby sprawdzić, czy treść układa się do siatki, nałóż równomiernie rozmieszczone kolumny. To rysuje 12-kolumnową linijkę z odstępami w poprzek viewportu.

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

Dopasuj maxWidth, gap i liczbę kolumn do faktycznej siatki strony. Teraz możesz na pierwszy rzut oka zobaczyć, czy nagłówki, karty i obrazy zatrzaskują się na tych samych liniach — czy dryfują o kilka pikseli.

Pełna mapa klawiatury

• o — przełącz konturowanie wszystkiego.
• f — znajdź winowajców poziomego overflow.
• g — przełącz 12-kolumnową linijkę siatki.
• Plakietka rozmiaru aktualizuje się przy każdej zmianie rozmiaru, bez potrzeby klawisza.

Zachowaj sprawdzenia modyfikatorów (!e.metaKey && !e.ctrlKey), aby skróty nie kolidowały z komendami przeglądarki. Jeśli sama strona nasłuchuje zwykłych klawiszy liter, przełącz się na coś w stylu Alt+O.

Łączenie tego z panelem CSS

Ta nakładka mówi Ci, co jest nie tak; panel CSS w JustZix pozwala to naprawić bez opuszczania karty. Przepływ:

1. Wstrzyknij nakładkę z panelu JS i uruchom ją.
2. Przeciągaj okno przez breakpointy, obserwując plakietkę.
3. Widzisz pojawiający się pasek przewijania? Wciśnij f, dostań winowajcę.
4. Otwórz panel CSS i załataj go na żywo — max-width: 100%, overflow-wrap: anywhere, cokolwiek potrzeba.
5. Gdy wygląda dobrze, zapisz CSS do reguły, aby poprawka się utrwaliła.

Zobacz też

• Nakładka audytu dostępności na żywo — to samo podejście z nakładką na stronie dla a11y.
• Własny arkusz druku dla lepszych PDF-ów — naprawianie układu dla innego medium.

Przestań walczyć z trybem urządzenia o błędy, których nie potrafi zdiagnozować. Zainstaluj JustZix, wstrzyknij nakładkę i debuguj układy responsywne w prawdziwej przeglądarce z pełną prędkością.