Инструмент дебаггинга HTML

Note

Код является модифицированной версией оригинала. Он не уменьшает возможностей изначального кода, а только улучшает его. Большая благодарность Андрею Федорову за изначальную структуру кода.

Руководство пользования

1. Копировать код в буфер обмена
2. Вставить в конец стилей css
3. Открыть в браузере сайт, который подлежит исследованию.
4. Готово! Можно проводить дебаг)

Визуальная индикация:

• Анимированный счетчик ошибок в центре экрана.
• Красная контурная обводка сообщений об ошибках.

Возможности

• Проверка изображений

  • Обнаружение современных форматов (WebP/AVIF) без fallback
  • Проверка наличия атрибутов alt, width, height
  • Контроль правильного использования тега
  • Предупреждение о JPEG без современных альтернатив

• Семантическая проверка

  • Наличие обязательных тегов: h1, main, nav
  • Контроль семантики кнопок с иконками (aria-label)
  • Проверка использования тега time с datetime

• Доступность

  • Проверка атрибутов aria-label для кнопок
  • Контроль обязательных атрибутов у элементов форм (type у button)
  • Валидация альтернативных текстов изображений

• Оптимизация производительности

  • Проверка подключения скриптов без defer/async
  • Контроль подключения CSS-файлов
  • Валидация путей к CSS-файлам

• Дополнительно (оптимально)

  • Проверка наличия фавиконки
  • Проверка структуры секций (section с h2)
  • Контроль атрибута lang у html

Благодарности

Андрею Федорову за предоставленный код https://github.com/ai36/ai36.github.io
Александру Ламкову за идею подстветки ошибкок с помощью CSS
Garry Roberts за идею механизма запуска дебага
Вадиму Малычу за интересный проект стажировки https://preax.ru

Contact developer