Простой способ дебага вёрстки

Рано или поздно любой верстальщик сталкивается с проблемой появления горизонтального скрола или неправильным отображением блока. Зачастую поиск таких багов занимает достаточно времени. Существует несколько вариантов решения проблемы от примитивных свойств overflow-x: hidden к body, до сканирования вашего кода нейросетью, но мы рассмотрим несколько наиболее эффективных способов. 

Первый способ

Наиболее простым методом обнаружения сбоев вёрстки является свойство outline, которое можно применить ко всем элементам на сайте. Такой способ позволит выделить границы всех объектов сайта и наглядно понять что не так. Достаточно использовать следующий код в своём файле стилей:

* {
outline: 1px solid red;
}

Этот стиль поможет отследить большое количество багов, которые могут возникать при вёрстке сайтов. 

Второй способ

Не менее эффективный способ с применением jаvascript.  Принцип работы скрипта простой: получение ширины страницы, перебор элементов на странице, в случае если элемент больше ширины документа этот блок появится в консоли. Вставлять код можно как в файлы js так и в консоль разработчика. 

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Даже опытные разработчики не застрахованы от внезапного появления горизонтального скрола, поэтому стоит внести себе на заметку эти способы дебага, которые помогут сэкономить время.