Ускоряем разработку и тестирование с DevTools: 4 новых инструмента, которые сэкономят вам время

Отладка и тестирование — основа нашей работы, но они могут быть утомительными и отнимать много времени. Поэтому сегодня я расскажу о четырех новых фичах в 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 превращается в полноценный набор инструментов для быстрого и эффективного тестирования, сокращая время на рутину и позволяя сосредоточиться на главном — обеспечении стабильной и качественной работы продукта.