Оверлей для отладки адаптива: брейкпоинты, переполнение, сетка-линейка

16 мая 2026 · автор JustZix Team

Режим устройства DevTools хорош, пока не начинает мешать: он сжимает твой вьюпорт, тормозит при изменении размера и не может сказать, какой элемент вызывает эту бесящую горизонтальную прокрутку. Эта статья собирает лёгкий оверлей для отладки адаптива, который ты внедряешь прямо на страницу, — живой бейдж размера, имя активного брейкпоинта, переключатель «обвести всё», поиск переполнения и колоночную линейку. Соедини его с панелью CSS JustZix — и сможешь заметить баг и починить его в том же окне.

Почему оверлей на странице лучше режима устройства

Режим устройства отвечает на вопрос «как это выглядит при 375px?» — но большинство багов адаптива не про конкретную ширину, они про переходы: маржин, который не схлопывается, картинка с фиксированной шириной, флекс-потомок, который отказывается сжиматься. Для них тебе нужно тащить настоящее окно браузера и смотреть, как числа меняются вживую. Внедрённый оверлей даёт тебе это, на нативной производительности, без обрамления, ворующего пиксели.

Всё ниже — одно JS-правило. Внедри его один раз; оверлей обновляет себя сам, пока ты меняешь размер.

Живой бейдж вьюпорта

Начни с фиксированного бейджа, который показывает текущую ширину и высоту вьюпорта и обновляется при каждом изменении размера.

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

Бейдж сидит внизу слева, игнорирует события указателя, чтобы никогда не блокировать клик, и едет на z-index, достаточно высоком, чтобы перекрыть почти любой сайт.

Именуем активный брейкпоинт

Сырое число пикселей полезно, но «мы в планшетном диапазоне?» — это вопрос, который ты на самом деле задаёшь. Сопоставь ширины именам — подстрой таблицу под фреймворк сайта (это значения по умолчанию 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';
  }

Теперь бейдж читается как-то так: 1024 × 768px · lg — и в тот миг, когда ты перетаскиваешь через границу брейкпоинта, имя переключается. Эта мгновенная обратная связь — весь смысл.

Обводим каждый элемент

Классический трюк «обвести всё» обнажает блочную модель всей страницы — ты сразу видишь блуждающие маржины, несовпадающие колонки и случайную вложенность. Сделай его переключателем, чтобы он не мешал.

  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 вместо border важно — контуры не занимают места, так что их переключение не вызывает переформатирование вёрстки, которую ты пытаешься осмотреть.

Поиск горизонтального переполнения

Это функция, ради которой стоит вся статья. Боковая прокрутка означает, что какой-то элемент шире вьюпорта — но какой? Обойди каждый элемент и пометь любой, чей правый край вылезает за 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();
  });

Нажми f — и каждый провинившийся элемент получает пурпурный контур; список также попадает в Output Console, чтобы ты мог осмотреть каждый узел. Обычно это один элемент — картинка фиксированной ширины, неразрывная длинная строка, отрицательный маржин — и теперь ты точно знаешь, какой.

Колоночная линейка / сетка

Чтобы проверить, что контент выровнен по сетке, наложи равномерно расставленные колонки. Это рисует 12-колоночную линейку с отступами поперёк вьюпорта.

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

Подгони maxWidth, gap и число колонок под реальную сетку сайта. Теперь ты с одного взгляда видишь, цепляются ли заголовки, карточки и картинки к одним линиям — или уплывают на пару пикселей.

Полная карта клавиш

o — переключить «обвести всё».
f — найти виновников горизонтального переполнения.
g — переключить 12-колоночную сетку-линейку.
Бейдж размера обновляется при каждом изменении размера, клавиша не нужна.

Сохрани проверки модификаторов (!e.metaKey && !e.ctrlKey), чтобы шорткаты не сталкивались с командами браузера. Если сам сайт слушает обычные буквенные клавиши, переключись на что-то вроде Alt+O.

Соединяем с панелью CSS

Этот оверлей говорит тебе, что не так; панель CSS JustZix позволяет починить это, не покидая вкладку. Воркфлоу:

Внедри оверлей из панели JS и запусти его.
Тащи своё окно через брейкпоинты, наблюдая за бейджем.
Видишь, как появилась прокрутка? Нажми f, получи виновника.
Открой панель CSS и пропатчи его вживую — max-width: 100%, overflow-wrap: anywhere, что бы ему ни требовалось.
Когда выглядит правильно, сохрани CSS в правило, чтобы починка закрепилась.

Смотри также

Живой оверлей аудита доступности — тот же подход с оверлеем на странице для a11y.
Свой стиль печати для лучших PDF — починка вёрстки для другого носителя.

Хватит воевать с режимом устройства из-за багов, которые он не может диагностировать. Установи JustZix, внедри оверлей — и отлаживай адаптивную вёрстку в своём настоящем браузере на полной скорости.

Оцени эту статью

Оценок пока нет — оцени первым.