🛠 Rendering в DevTools: шпаргалка для QA-инженеров от Владлена Цыганенко

Если Вы хотите повысить качество UI-тестирования, выявлять визуальные баги и анализировать поведение сайта при отрисовке, обратите внимание на вкладку Rendering в Chrome DevTools.

Это мощный инструмент, который поможет заметить лаги интерфейса, понять, что тормозит отрисовку, и выявить проблемы адаптивности.

Ниже краткая шпаргалка, как её открыть и что с ней делать.

Как открыть вкладку Rendering:
▫️Откройте DevTools: F12 или Ctrl+Shift+I (на macOS: Cmd+Option+I);
▫️Нажмите на кнопку с тремя точками в правом верхнем углу DevTools;
▫️Выберите More tools → Rendering; либо Ctrl+Shift+P (на macOS: Cmd+Shift+P)
▫️Панель появится в нижней части DevTools, обычно в виде вкладки.

Зачем нужна панель Rendering:
Эта панель позволяет включать специальные оверлеи и режимы для анализа отрисовки сайта в браузере.

Вот основные опции:

▫️Paint flashing
Подсвечивает зелёным участки страницы, которые браузер "перерисовывает".
📌 Полезно для выявления "лишней" отрисовки при скролле или ховере.

▫️Layout Shift Regions
Показывает области, где происходят layout shifts (внезапные смещения контента).
📌 Используется для анализа CLS (Cumulative Layout Shift) важного показателя Core Web Vitals.

▫️Layer borders
Визуализирует слои компоновки (compositing layers).
📌 Полезно при оптимизации производительности и отладке сложной графики (например, анимаций).

▫️FPS Meter
Выводит график кадров в секунду.
📌 Если FPS падает ниже 60, ищите, что грузит интерфейс.

▫️Scrolling Performance Issues
Показывает участки, где возможно торможение скролла.
📌 Особенно важно при тестировании длинных страниц и SPA.

▫️Emulate a focused page
Принудительно эмулирует фокус окна браузера.
📌 Нужен для проверки поведения элементов, реагирующих на фокус (например, плейсхолдеры или анимации при фокусе).

▫️Emulate CSS media feature prefers-reduced-motion
Позволяет эмулировать предпочтение пользователя "минимизировать анимацию".
📌 Актуально для проверки доступности и UX.

💡 Практика: как использовать QA-инженеру
▫️При воспроизведении визуального бага включите Paint flashing вы поймёте, перерисовывается ли нужная часть.
▫️Замечаете "дёргание" интерфейса? Включите Layout Shift Regions и зафиксируйте баг с точными координатами.
▫️Медленная анимация? Включите FPS Meter и найдите провал до < 60fps.
▫️Страница тормозит при прокрутке? Включите Scrolling Performance Issues и увидите участки с проблемами.

Вывод:
QA-инженеры с помощью панели Rendering могут точно локализовать визуальные и производительные дефекты, повысить качество баг-репортов и лучше взаимодействовать с командой разработки.

💬 А вы используете Rendering при тестировании UI? Или только Network и Console? Делитесь опытом