https://github.com/maxim-klenov/debug-html-snippet

Полезный css снипет который проверяет код на нарушение HTML стандартов
https://github.com/maxim-klenov/debug-html-snippet

css debbuger debug debugging html tool

Last synced: 9 months ago
JSON representation

Полезный css снипет который проверяет код на нарушение HTML стандартов

• Host: GitHub
• URL: https://github.com/maxim-klenov/debug-html-snippet
• Owner: maxim-klenov
• License: mit
• Created: 2025-04-17T14:56:44.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-17T16:30:55.000Z (about 1 year ago)
• Last Synced: 2025-04-18T05:34:52.038Z (about 1 year ago)
• Topics: css, debbuger, debug, debugging, html, tool
• Language: CSS
• Homepage:
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

> [!NOTE] 

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

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

1. [Копировать код](/debugger.css) в буфер обмена

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