============================================================
Web Tools Extension — Documentation
Язык описания: Русский
Названия функций/действий: Английский (как в UI / data-атрибутах)
============================================================

Введение
--------
Расширение добавляет набор инструментов для веб-разработчика: временно отключать функции браузера, управлять cookies, менять отображение CSS, анализировать страницу, 
работать с формами, изображениями, размерами окна и запускать онлайн-проверки (валидаторы).

Важно:
- Многие действия применяются к текущей активной вкладке.
- Некоторые действия являются переключателями (toggle): повторный клик отключает/возвращает обратно.
- "Disable Cookies" (глобально) меняет настройку cookies для всех сайтов. Существующие cookies не удаляются — их нужно удалять отдельными командами.


============================================================
1) DISABLE (Отключение функций браузера)
============================================================

disableJavaScript
- Что делает: Отключает выполнение JavaScript на страницах (обычно через настройки контента браузера / перезагрузку страницы).
- Пример (ежедневный): проверить, насколько сайт “ломается” без JS, или найти контент, который не должен зависеть от JS.

disableNotifications
- Что делает: Блокирует уведомления сайтов (push notifications) в браузере.
- Пример: перестать получать навязчивые уведомления от новостных сайтов.

disablePopups
- Что делает: Блокирует всплывающие окна (pop-ups).
- Пример: при тестировании лендинга или сайта с рекламой, чтобы попапы не мешали.

resetAll
- Что делает: Возвращает отключённые функции к исходному состоянию (включает обратно).
- Пример: быстро вернуть “нормальный режим” после тестов.


============================================================
2) COOKIES (Cookies / куки)
============================================================

disableCookies
- Что делает: Глобально переключает cookies для всех сайтов (ALLOW ↔ BLOCK).
  - ALLOW: сайты могут устанавливать/читать cookies.
  - BLOCK: сайты не смогут устанавливать новые cookies (и часто ломается логин/сессии).
- Важно: уже существующие cookies не удаляются автоматически.
- Пример: проверить, как сайт работает без cookies (privacy / тестирование).

addCookie
- Что делает: Открывает форму для добавления cookie (Name/Value/Domain/Path).
  В текущей реализации “Save” может создавать cookie через document.cookie (работает только для не-HttpOnly cookies).
- Пример: вручную установить тестовую cookie для A/B теста или локальной отладки.

deleteDomainCookies
- Что делает: Удаляет все cookies для домена текущей страницы.
- Пример: “Разлогиниться” и очистить следы сессии на сайте (например GitHub, магазин, банковский кабинет).

deletePathCookies
- Что делает: Удаляет cookies только для конкретного path (путь) на домене.
  Path берётся из поля “Path (default /)” или из текущего URL, если поле пустое.
- Пример: очистить cookies только для /checkout, не трогая остальные страницы.

deleteSessionCookies
- Что делает: Удаляет только session cookies (куки без expirationDate) для домена текущей страницы.
- Пример: убрать временную сессию, чтобы проверить авторизацию заново без полного “wipe” всех cookies.

viewCookieInfo
- Что делает: Показывает информацию о cookies домена (количество, список).
  Обычно выводится краткая информация (count) и/или список в блоке #cookiesMessage.
- Пример: быстро увидеть, сколько cookies ставит сайт, и какие именно (например, analytics, session, preferences).


============================================================
3) CSS (CSS Tools)
============================================================

disableAllStyles
- Что делает: Отключает все стили (CSS) на странице, чтобы увидеть “голую” структуру HTML.
- Пример: проверить семантику, порядок контента, доступность без оформления.

disableBrowserDefault
- Что делает: Отключает стили по умолчанию, которые браузер применяет к элементам.
- Пример: сравнить чистый вид элементов или отладить reset/normalize.

disableEmbedded
- Что делает: Отключает встроенные <style> блоки на странице.
- Пример: проверить, что конкретно ломает встроенный стиль.

disableInline
- Что делает: Отключает inline-стили (style="...").
- Пример: найти, кто “перебивает” CSS (inline часто имеет высокий приоритет).

disableLinked
- Что делает: Отключает подключённые CSS файлы <link rel="stylesheet">.
- Пример: отладка, какой именно stylesheet создаёт проблему.

disablePrint
- Что делает: Отключает print-стили (для печати).
- Пример: проверить, как страница будет выглядеть при печати.

displayHandheld
- Что делает: Применяет/имитирует handheld/мобильные стили (если предусмотрено).
- Пример: быстро проверить мобильную верстку без полноценного device mode.

displayPrint
- Что делает: Применяет/имитирует print media.
- Пример: проверить печатную версию договора/страницы.

reloadLinked
- Что делает: Перезагружает подключённые CSS файлы (reload link stylesheets).
- Пример: после правок в CSS (при разработке) обновить стили без полной перезагрузки.

borderBox
- Что делает: Устанавливает box-sizing: border-box (часто помогает в расчётах размеров).
- Пример: отладка размеров блоков.

viewCSS
- Что делает: Показывает CSS информацию (обычно открывает/выводит найденные стили).
- Пример: быстро собрать “все стили” для анализа.


============================================================
4) IMAGES (Изображения)
============================================================

disableImages
- Что делает: Отключает загрузку изображений (часто через настройки/перехват).
- Пример: проверить производительность или структуру страницы без картинок.

hideImages
- Что делает: Скрывает изображения на странице (CSS/DOM), но загрузка может оставаться.
- Пример: оценить контент без визуального шума.

hideBackgroundImages
- Что делает: Скрывает фоновые изображения (background-image).
- Пример: проверить читаемость текста на фонах.

makeImagesFullSize
- Что делает: Делает изображения “в полный размер” (отмена ограничений).
- Пример: рассмотреть картинки детальнее без открытия в новой вкладке.

makeImagesInvisible
- Что делает: Делает изображения невидимыми (opacity/visibility), сохраняя место.
- Пример: отладка верстки, чтобы не “прыгали” блоки.

outlineAllImages
- Что делает: Обводит рамкой все <img>.
- Пример: понять расположение картинок, размеры, наличие пустых мест.

outlineBackgroundImages
- Что делает: Обводит элементы, где есть background-image.
- Пример: найти элементы с фоновыми картинками.

outlineImagesWithAdjustedDimensions
- Что делает: Подсвечивает картинки с “подогнанными” (неестественными) размерами.
- Пример: найти изображения, которые сильно растянуты.

outlineImagesWithEmptyAltAttributes
- Что делает: Подсвечивает изображения с alt="".
- Пример: аудит доступности (accessibility).

outlineImagesWithOversizedDimensions
- Что делает: Подсвечивает изображения слишком большого размера относительно отображения.
- Пример: найти проблемы производительности (грузится огромная картинка).

outlineImagesWithoutAltAttributes
- Что делает: Подсвечивает картинки без alt.
- Пример: accessibility аудит.

outlineImagesWithoutDimensions
- Что делает: Подсвечивает картинки без width/height.
- Пример: предотвращение layout shift (CLS).

displayAltAttributes
- Что делает: Отображает alt рядом с изображениями.
- Пример: проверить, корректные ли alt-тексты.

displayImageDimensions
- Что делает: Показывает размеры картинок.
- Пример: быстро увидеть width/height на странице.

displayImagePaths
- Что делает: Показывает пути (src) изображений.
- Пример: найти откуда загружается файл, проверить CDN.

replaceImagesWithAltAttributes
- Что делает: Заменяет изображения на их alt-текст (приближённо к “текстовому режиму”).
- Пример: оценить контент для screen reader и SEO.

viewImageInformation
- Что делает: Показывает сводную информацию по изображениям.
- Пример: аудит изображений перед оптимизацией.


============================================================
5) INFO (Информация о странице)
============================================================

pageInfo
- Что делает: Показывает общую информацию о странице (URL, заголовки, мета).
- Пример: быстро проверить title/description.

displayAbbreviations
- Что делает: Подсвечивает <abbr> и их расшифровки.
- Пример: документирование терминов.

displayAccessKeys
- Что делает: Показывает accesskey на элементах.
- Пример: проверка доступности и горячих клавиш.

displayAnchors
- Что делает: Показывает анкоры (#id) на странице.
- Пример: отладка якорных ссылок.

displayAriaRoles
- Что делает: Показывает ARIA roles.
- Пример: accessibility аудит.

displayDivDimensions
- Что делает: Показывает размеры div элементов.
- Пример: отладка layout.

displayDivOrder
- Что делает: Показывает порядок div’ов (визуально/текстово).
- Пример: понять структуру DOM.

displayElementInformation
- Что делает: Показывает данные по элементам (теги, id, классы).
- Пример: при верстке и отладке CSS.

displayIdClassDetails
- Что делает: Выводит детали id и классов.
- Пример: понять селекторы.

displayLinkDetails
- Что делает: Показывает детали ссылок.
- Пример: проверить куда ведут ссылки.

displayObjectInformation
- Что делает: Информация об object/embed/iframe и т.д.
- Пример: аудит вставок.

displayStackLevels
- Что делает: Показывает z-index/stacking context.
- Пример: отладка перекрытий.

displayTabIndex
- Что делает: Показывает tabindex.
- Пример: навигация клавиатурой.

displayTableDepth
- Что делает: Показывает глубину таблиц.
- Пример: сложные таблицы, аудит.

displayTableInformation
- Что делает: Общая инфа по таблицам.
- Пример: проверка структуры.

displayTitleAttributes
- Что делает: Показывает title="" атрибуты.
- Пример: UX и подсказки.

displayTopographicInformation
- Что делает: Отображает “топографическую” информацию (структура/уровни).
- Пример: анализ расположения блоков.

findDuplicateIds
- Что делает: Находит повторяющиеся id (ошибка HTML).
- Пример: исправление багов JS/CSS из-за duplicate id.

viewAnchorInformation
- Что делает: Список/инфо по якорям.
- Пример: проверка навигации.

viewColorInformation
- Что делает: Инфо по цветам, найденным на странице.
- Пример: аудит дизайн-системы.

viewDocumentOutline
- Что делает: Выводит outline документа (h1-h6).
- Пример: SEO и структура контента.

viewJavaScript
- Что делает: Информация о JS (подключения/скрипты).
- Пример: проверить какие скрипты загружаются.

viewLinkInformation
- Что делает: Список ссылок страницы.
- Пример: аудит ссылок.

viewMetaTagInformation
- Что делает: Список meta-тегов.
- Пример: SEO/OG/robots.

viewResponseHeaders
- Что делает: Смотрит response headers (если реализовано).
- Пример: проверить CORS, cache-control, content-type.


============================================================
6) OUTLINE (Подсветка элементов)
============================================================

outlineAbsolutePositionedElements
- Подсвечивает элементы с position:absolute.
- Пример: отладка “прыгающей” верстки.

outlineBlockLevelElements
- Подсвечивает block-level элементы.
- Пример: визуально понять структуру блоков.

outlineDeprecatedElements
- Подсвечивает устаревшие HTML элементы.
- Пример: модернизация проекта.

outlineExternalLinks
- Подсвечивает внешние ссылки.
- Пример: проверить, где уходишь на другие домены.

outlineFixedPositionedElements
- Подсвечивает position:fixed.
- Пример: отладка sticky header/баннеров.

outlineFloatedElements
- Подсвечивает float элементы.
- Пример: старые макеты.

outlineFrames
- Подсвечивает фреймы/iframes.
- Пример: найти встраивания.

outlineHeadings
- Подсвечивает заголовки h1-h6.
- Пример: проверка структуры.

outlineNonSecureElements
- Подсвечивает небезопасные элементы (http на https).
- Пример: mixed content.

outlineRelativePositionedElements
- Подсвечивает position:relative.
- Пример: отладка контекста позиционирования.

outlineTableCaptions
- Подсвечивает caption у таблиц.
- Пример: accessibility.

outlineTableCells
- Подсвечивает td/th.
- Пример: сложные таблицы.

outlineTables
- Подсвечивает <table>.
- Пример: проверить разметку таблиц.

showElementTagNames
- Показывает имена тегов у элементов.
- Пример: быстро понять, что за элемент.


============================================================
7) FORMS (Формы)
============================================================

checkAllCheckboxes
- Отмечает все checkbox.
- Пример: “выбрать все” на тестовой форме.

uncheckAllCheckboxes
- Снимает все checkbox.
- Пример: сброс формы.

clearFormFields
- Очищает поля ввода.
- Пример: очистка тестовых данных.

clearRadioButtons
- Снимает выбор radio (если реализовано).
- Пример: проверить состояние формы без выбора.

convertFormGetsToPosts
- Меняет метод форм GET → POST.
- Пример: тестирование безопасности/скрытия query.

convertFormPostsToGets
- Меняет POST → GET.
- Пример: отладка параметров в URL.

convertSelectElementsToTextInputs
- Превращает select в текстовый input.
- Пример: тестирование нестандартных значений.

convertTextInputsToTextareas
- Превращает input[type=text] в textarea.
- Пример: ввод длинного текста.

displayFormDetails
- Показывает детали форм (action/method/inputs).
- Пример: аудит форм.

displayPasswords
- Показывает пароли вместо точек (в тестовом режиме).
- Пример: проверить, что вводишь без ошибок.

enableAutoCompletion
- Включает автозаполнение.
- Пример: UX тест.

enableFormFields
- Включает disabled поля.
- Пример: посмотреть скрытые/заблокированные поля.

expandSelectElements
- “Раскрывает” select (показывает все опции).
- Пример: удобный просмотр.

makeFormFieldsWritable
- Делает поля редактируемыми (снимает readonly).
- Пример: тестирование.

outlineFormFieldsWithoutLabels
- Подсвечивает поля без label.
- Пример: accessibility.

populateFormFields
- Автозаполняет поля (тестовые данные).
- Пример: быстрые тесты формы.

removeFormValidation
- Отключает валидацию формы.
- Пример: проверить серверную валидацию.

removeMaximumLengths
- Убирает maxlength.
- Пример: тест ограничений.

viewFormInformation
- Сводная информация по формам.
- Пример: аудит форм на странице.


============================================================
8) RESIZE (Размер окна)
============================================================

displayWindowSize
- Показывает текущий размер окна браузера.
- Пример: быстро узнать, какой viewport сейчас.

resizeWindow
- Открывает форму ввода размеров и изменяет размер окна.
- Пример: тест responsive (например 1366x768).

resizePreset (1024x768)
- Устанавливает окно на фиксированный размер.
- Пример: быстрый тест старого разрешения.

editResizeDimensions
- Открывает форму для изменения размеров (аналог resizeWindow).
- Пример: ввести любое значение.

viewResponsiveLayouts
- Открывает страницу расширения для просмотра макетов под разные размеры.
- Пример: проверить сайт на мобильных/планшетах.


============================================================
9) TOOLS (Онлайн валидаторы/инструменты)
============================================================

Validate CSS
- Проверяет CSS через валидатор.
- Пример: найти ошибки синтаксиса.

Validate Feed
- Проверка RSS/Atom feed.
- Пример: блог/новости.

Validate HTML
- Проверка HTML валидатором.
- Пример: исправить ошибки разметки.

Validate Accessibility
- Проверка доступности (a11y).
- Пример: соответствие стандартам.

Validate Links
- Проверка битых ссылок.
- Пример: аудит сайта.

Validate Structured Data
- Проверка schema.org/структурированных данных.
- Пример: SEO разметка.

View DNS Records
- Показ DNS записей домена.
- Пример: проверить A/CNAME/MX.

Validate Local CSS
- Проверка локального CSS (обычно файла/текущего).
- Пример: проверка проекта.

Validate Local HTML
- Проверка локального HTML.
- Пример: проверить сохранённую страницу.

View Source
- Открыть исходный код страницы.
- Пример: посмотреть HTML без devtools.


============================================================
10) MISCELLANEOUS (Разное)
============================================================

Clear Cache
- Очищает кэш браузера.
- Пример: “жёстко” проверить загрузку ресурсов заново.

Clear History
- Открывает подтверждение и очищает историю браузера.
- Пример: приватность.

Display Color Picker
- Открывает picker в popup, позволяет копировать HEX.
- Пример: быстро взять цвет для дизайна.

Display Hidden Elements
- Пытается показать скрытые элементы (hidden/visibility/display none частично).
- Пример: найти скрытые блоки/баннеры.

Display Line Guides
- Показывает сетку/направляющие (grid overlay).
- Пример: выравнивание по сетке.

Display Ruler
- Показывает линейку по краям экрана.
- Пример: измерение отступов.

Linearize Page
- “Линеаризует” страницу (убирает сложный layout, делает текстовый поток).
- Пример: чтение/доступность/проверка структуры.

Make Frames Resizable
- Делает iframe resizable (если возможно) и рисует маркеры.
- Пример: тест встроенных виджетов.

Mark All Links Unvisited
- Пробует сделать ссылки “непосещёнными” изменением URL (параметр).
- Пример: визуальный тест стилей :visited (ограниченно).

Mark All Links Visited
- Пробует пометить ссылки как посещённые (загружая некоторые ссылки скрыто).
- Пример: тест стилей visited (ограниченно).


============================================================
Примечания по тестированию
============================================================
1) Disable Cookies (глобально):
- Меняет настройку, но НЕ удаляет существующие cookies.
- Чтобы увидеть эффект на GitHub:
  a) Нажать Disable Cookies
  b) Нажать Delete Domain Cookies на github.com
  c) Обновить страницу

2) Если изменения не применяются:
- Перезагрузить расширение (chrome://extensions → Reload)
- Обновить вкладку сайта
- Проверить Service Worker console на ошибки
============================================================