Элементы DOM отладчика разработчика на вашей странице с одной строкой кода

Сколько раз вы боролись с найти одну конкретную проблему испортить макет CSS? Проблемы с CSS - от десятка до десятка, от отсутствующих закрывающих тегов до неправильно вложенных братьев и сестер. И с этот CSS макет отладчик, процесс просто стало намного проще.

Эта строка кода будет пройти через DOM а также очертить каждый элемент с другим цветом. Таким образом, вы можете лучше визуализировать как ваш CSS работает (или не работает) и быстро определить проблемные зоны.

GitHub позволяет разработчикам сохранить маленькие кусочки кода называется Гистс. Это все с открытым исходным кодом и бесплатно сохранить для собственного использования. Вот почему этот CSS-отладчик так полезен. Он сочетает в себе современное мастерство Chrome DevTools с простота браузерных закладок.

Чтобы использовать этот код, вы должны сначала скопируйте любую понравившуюся вам версию со страницы Gist. Затем вы вставьте этот код в окно вашего терминала и запустить его. Вы должны в конечном итоге такой результат:

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

Этот фрагмент кода может быть вспоминается снова и снова по нажатию кнопки. Вы можете разбирать каждую страницу, полный этих красочных контуров CSS, для элементов DOM родителей и детей.

Тем не менее, вы не должны чувствовать себя ограниченным только Chrome. Этот фрагмент работает для всех основных браузеров, включая Firefox, Safari, Opera и Internet Explorer.

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

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