Поиск ошибок в коде html

Валидатор — это онлайн-парсер, который сканирует веб-код страницы и проверяет на синтаксические, стилистические и другие ошибки, а также анализирует соответствие кода современным веб-стандартам (например, W3C). Часто, именно ошибки в коде приводят к разным проблемам сайтов, связанными с поисковой оптимизацией (ПС не могут просканировать и проиндексировать сайт), отображением в браузерах на разных устройствах. В данной статье я подобрал для вас наиболее удобные и эффективные онлайн валидаторы кода, которыми пользуюсь сам.

W3C HTML Validator

W3C — это Всемирный Консорциум Веб-паутины, определяет стандарты для всех веб-сайтов и веб-приложений. С помощью онлайн-валидаторов W3C можно проверить веб-код на ошибки.

Инструмент поможет:

Форк этого валидатора размещен в сервисах Site24x7. Кому интересно, может попробовать.

W3C CSS Validator

Бесплатный сервис проверки CSS-кода от W3C. Может проверить страницу по указанному URL, загруженному файлу или набранному коду. Поддерживает все версии CSS.

W3C RSS Validator

Бесплатный сервис для проверки синтаксиса RSS/ATOM ленты от W3C.

FIND-XSS. NET

Онлайн-сервис с базовым набором инструментов для проверки веб-страниц. Имеет достаточно простой и понятный в использовании интерфейс. Прекрасно подойдет для всех, кому в W3C валидаторах сложно разобраться.

Dr. Watson Validator

Неплохой, простенький инструмент, который помимо проверки синтаксиса HTML, дает еще такую информацию как: код ответа страницы, проверка количества слов в тексте, анализ ссылок, проверка совместимости с поисковыми системами и так далее.

XML Schema Validator

Сервис проверяет XML документы, а также XHTML.

Code Beauty Java Script Validator

Простой онлайн-валидатор Java Script, который позволит быстро проверить код на ошибки, указав URL, вставив в форму или с помощью загрузки файлом.

PHPLint Online

Онлайн-валидатор PHP кода от итальянского веб-разработчика Умберто Сальси. Умеет проверять PHP-код (5.6, 7.4), так и различные php-модули. Содержит много интересных для применения настроек.

Знаете другие инструменты, которые не попали в данный список? Пожалуйста, напишите в комментариях!

Простые правила разметки

Как проверить, что вы всё сделали правильно? Что в разметке и в стилях нет ошибок и что результат соответствует макету? Можно воспользоваться разными инструментами, каждый для своих целей.

Проверить HTML #

Он проверит ваш HTML на соответствие спецификациям, а так же поможет найти простые ошибки, вроде незакрытых тегов.

Проверить БЭМ-разметку #

Инструмент построит структуру страницы, проверит БЭМ-разметку на самые простые ошибки и покажет иерархию заголовков.

Проверить CSS #

Валидация

Форматирование

Также нужен файл с правилами проверки стилей. Можно взять мой набор правил, или накликать свой используя Stylelint Config Generator.

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

SASS: LESS:

Команда запускается в папке проекта.

Проверить страницу на разных размерах экрана #

Используйте эмулятор мобильных устройств, который есть в Хроме. Кнопка включения находится в панели разработчиков, вторая иконка в верхнем ряду:

В эмуляторе в выпадающем меню можно просто выбрать устройство с подходящими размерами, а можно кликнуть «Edit» и добавить свои:

Справа на скриншоте есть выпадушка с выбором типа устройства (на скриншоте Mobile), эта опция влияет на наличие прокрутки на странице. Чтобы прокрутка не отъедала ширину страницы, между Mobile и Desktop всегда выбирайте Mobile.

Там же можно скрыть устройства, которые вам не нужны.

Мой список устройств выглядит так:

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

Не забывайте также проверять макеты на очень широких экранах (1400+), чтобы убедиться что и в этом случае страница не разваливается.

Проверить страницу на соответствие макету #

Проверить шрифты #

Панель разработчика → Network → Fonts.

Подсказка: проверьте, что в браузерах с поддержкой woff2 загрузится именно этот формат. Если грузится woff, проверьте порядок перечисления шрифтов. Браузер выбирает первый подходящий, а не оптимальный из перечисленных.

Проверить изображения #

Панель разработчика → Network → Img.

Плотность пикселей устройства можно выбрать в меню эмулятора:

Если там нет такой опции, нажмите на три точки в правой части панели устройств и включите её в выпадающем меню:

Если все адаптивные изображения содержат в своём адресе @, этот спецсимвол можно использовать для фильтрации, чтобы в панели показывались только те картинки, которые нужно проверить:

В панели устройств меняйте размеры экрана и плотность пикселей и смотрите какие изображения загрузились.

Проверить страницу на переполнение контентом #

Введите в консоль браузера команду:

После этого вы сможете отредактировать любой текстовый элемент на странице и добавить в него текст. Это позволит проверить поведение страницы в случаях когда контента слишком мало или наоборот — слишком много.

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