Многие QA-инженеры используют DevTools только для базовых функций, но на самом деле в нём скрыто много мощных инструментов для анализа и отладки. Вот подборка полезных фич, которые сэкономят время и помогут выявить баги:

📌 1. CSS Overview

Что делает: Показывает полный анализ стилей на странице, включая дубли, несогласованности и редкие цвета.
Полезно для: Обнаружения избыточных стилей, ошибок в верстке.
Как включить: Ctrl+Shift+P → CSS Overview → Capture overview.

🧭 2. Accessibility Tree

Что делает: Анализирует доступность компонентов, показывая, какие элементы видны скринридерам, а также их роли, названия и состояния.
Полезно для: Проверки соответствия WCAG и улучшения доступности.
Как открыть: Вкладка Elements → справа выбрать Accessibility.

🔴 3. DOM Breakpoints

Что делает: Автоматически останавливает выполнение при изменении DOM (добавление, удаление или изменение узлов).
Полезно для: Отслеживания изменений в DOM и выявления проблем с динамическим контентом.
Где найти: ПКМ по элементу → Break on…

🧪 4. Live Expressions

Что делает: Позволяет следить за значением переменной в реальном времени.
Полезно для: Отладки динамических интерфейсов, мониторинга переменных.
Как добавить: Вкладка Sources → панель Watch → + Add live expression.

🎞 5. FPS Meter

Что делает: Показывает частоту кадров (FPS) для анализа производительности отрисовки.
Полезно для: Поиска лагов и проблем с производительностью GPU.
Как включить: Ctrl+Shift+P → Show rendering → галочка FPS meter.

🧠 6. Performance Insights

Что делает: Анализирует производительность с визуализацией layout, paint и scripting.
Полезно для: Определения причин просадок производительности.
Где найти: Вкладка Performance Insights.

⚡️ 7. Emulate Vision Deficiencies

Что делает: Симулирует нарушения зрения, такие как дальтонизм и другие состояния.
Полезно для: Тестирования интерфейса на доступность для людей с нарушениями зрения.
Как включить: Вкладка Rendering → Emulate vision deficiencies.

🧷 8. Snippets

Что делает: Возможность писать свои мини-скрипты для автоматизации задач.
Полезно для: Повторяющихся проверок, создания тестов и скриптов.
Где найти: Вкладка Sources → Snippets.

💡 Лайфхаки:

• Ctrl+Shift+P — поиск любой скрытой фичи DevTools.
• Локатор из DevTools: ПКМ → Copy → Copy JS path / XPath.
• Тест адаптива: Toggle device toolbar (Ctrl+Shift+M) + Add device type.

❓ А что используешь ты в своей работе? Поделись своими находками или инструментами, которые помогают тебе в тестировании!