Отладка и тестирование — основа нашей работы, но они могут быть утомительными и отнимать много времени. Поэтому сегодня я расскажу о четырех новых фичах в DevTools, которые помогут тестировщикам и разработчикам работать быстрее и эффективнее. Эти инструменты созданы специально, чтобы упростить рутинные задачи отладки и анализа производительности. Давайте разберем, как они работают.
1. Инспектирование элементов без потери фокуса
Часто бывает: нужно протестировать выпадающее меню или другой интерактивный элемент, а он исчезает, как только вы открываете DevTools. Это происходит, потому что страница теряет фокус, но в DevTools теперь есть решение.
Проблема: Элементы исчезают при инспектировании, что усложняет их проверку.
Решение: Включите новую опцию
Эмуляция фокуса страницына вкладке «Стили», чтобы страница всегда оставалась в фокусе.Как включить: Перейдите на вкладку «Стили», найдите параметр "Эмуляция фокуса страницы" и активируйте его. Настройка останется включенной, так что не придется каждый раз повторять эти шаги.
Эта опция экономит время и облегчает тестирование исчезающих элементов — вам больше не придется придумывать обходные пути.
2. Быстрая помощь ИИ для ошибок в консоли
Ошибки в консоли — знакомая боль для каждого тестировщика. Они могут появляться в самых неожиданных местах, и бывает трудно понять, откуда они берутся. Теперь DevTools помогает разобраться в ошибках с помощью встроенного ИИ, который сразу предложит варианты решений.
Проблема: Ошибки в консоли, которые сложно отследить.
Решение: Нажмите на значок лампочки рядом с ошибкой, затем на кнопку «Продолжить», чтобы ИИ начал анализ. Он сгенерирует возможные причины проблемы и предложит решения, ускоряя процесс устранения ошибки
Примечание: Если предложение ИИ не подходит, вы всегда можете использовать встроенный поиск для дополнительных решений.
Эта функция особенно полезна для анализа повторяющихся ошибок, таких как undefined, и экономит массу времени на отладку.
3. Мониторинг производительности в реальном времени
В DevTools появилась новая панель производительности, которая сильно упрощает работу. Теперь можно отслеживать ключевые метрики вроде Core Web Vitals прямо во время тестирования — и главное, сразу видеть, как сайт ведет себя у реальных пользователей. Это настоящий помощник для тестировщика: вы не только видите, что происходит у вас, но и получаете картину того, как сайт работает «в поле».
Что умеет новая панель: Показывает метрики производительности в реальном времени и позволяет их сравнивать с данными пользователей.
Как это работает: Метрики обновляются автоматически и цветом подсвечивают проблемные зоны, чтобы можно было быстро отреагировать.
Зачем это нужно: Сравнение локальных данных с показателями реальных пользователей помогает сразу увидеть, если у них сайт работает медленнее, чем у вас. Так проще находить проблемные места и улучшать работу сайта для всех.
Эта новая панель — отличный инструмент для быстрого тестирования и анализа. С её помощью можно моментально понять, где теряется производительность, и быстро все подправить, чтобы сайт радовал не только вас, но и ваших пользователей.
4. Подмена API-ответов
Когда бэкенд еще не готов, а тестирование интерфейса уже нужно провести, новая функция Network Overrides в DevTools спасает положение. Она позволяет создавать поддельные ответы API, чтобы не прерывать процесс тестирования и не зависеть от готовности сервера.
Когда использовать: Если вы тестируете интерфейс, а API пока не готов.
Решение: С помощью Network Overrides можно подменить ответ API.
Как пользоваться:
Найдите нужный запрос в панели Network: В DevTools откройте вкладку Network и найдите API-запрос, который хотите подменить.
ПКМ по запросу: Кликните правой кнопкой мыши по запросу и выберите Override response (Подменить ответ).
Измените данные: В появившемся окне отредактируйте ответ. Введите или вставьте данные, которые хотите передать в интерфейс.
Сохраните изменения: Сохраните новые данные (ctrl + s), чтобы DevTools запомнил подмененный ответ.
Обновите страницу: Перезагрузите страницу, чтобы снова запустить API-запрос и увидеть, как интерфейс реагирует на подмененные данные.
Эта функция особенно удобна для командной работы. Подмененные файлы можно сохранить и синхронизировать с коллегами, чтобы у всех были одинаковые тестовые данные и больше не приходилось ждать готовности бэкенда.
Подытожим
Эти новые возможности DevTools помогут вам не просто ускорить работу, но и сделать тестирование и отладку более гибкими и точными. Теперь у вас есть инструменты, которые:
Упрощают инспектирование элементов без риска их исчезновения,
Дают подсказки по ошибкам в консоли с помощью ИИ,
Позволяют отслеживать производительность и видеть, как сайт работает у реальных пользователей,
А также моделируют ответы API, так что вы можете тестировать интерфейс, даже если бэкенд еще не готов.
С такими функциями DevTools превращается в полноценный набор инструментов для быстрого и эффективного тестирования, сокращая время на рутину и позволяя сосредоточиться на главном — обеспечении стабильной и качественной работы продукта.
