С чем работаешь в DevTools

Работа с DevTools в контексте тестирования

Как QA Engineer, я использую инструменты разработчика (DevTools) браузера как "швейцарский нож" для решения широкого спектра задач: от базовой инспекции элементов до сложной отладки производительности и сетевых проблем. Работа с DevTools — неотъемлемая часть моего ежедневного workflow, особенно при тестировании веб-приложений.

Ключевые вкладки (панели) и их применение в QA

1. Elements (Инспектор)

• Инспектирование и валидация DOM/CSS: Проверка корректности рендеринга элементов, их атрибутов (id, class, data-testid), стилей. Критично для проверки верстки.
• Тестирование адаптивности: Изменение размеров экрана, эмуляция различных устройств и параметров (разрешение, соотношение сторон, user-agent).
• Локальные манипуляции: Временное изменение контента, стилей или состояния элементов (например, disabled) для проверки поведения интерфейса без перезагрузки страницы. Это позволяет быстро проверить edge-кейсы.

  // Пример: Быстрая проверка обработки длинного текста в консоли.
  // 1. Находим элемент в Elements: <div data-qa="product-title">Простой заголовок</div>
  // 2. В Console пишем:
  document.querySelector('[data-qa="product-title"]').textContent = 'A'.repeat(500);
  // 3. Наблюдаем, как интерфейс справляется с переполнением.
  

2. Console (Консоль)

• Отслеживание ошибок и предупреждений: Самый быстрый способ обнаружить JS-ошибки, failed network requests, предупреждения о неиспользуемых ресурсах или устаревших API. Любая ошибка в консоли на продакшене — потенциальный баг.
• Взаимодействие с приложением: Выполнение команд для прямого доступа к глобальным объектам, вызова функций или проверки состояния переменных. Незаменимо для отладки.
• Фильтрация и мониторинг: Использование уровней логирования (Verbose, Info, Warnings, Errors) и фильтров для фокусировки.

3. Network (Сеть)

• Анализ HTTP-запросов и ответов: Проверка URL, методов, статус-кодов, заголовков (Request/Response Headers), времени отклика. Поиск проблем с CORS, аутентификацией, кэшированием.
• Валидация данных (Payload/Response): Проверка формата (JSON, XML) и корректности данных, отправляемых и получаемых приложением. Сравнение с ожиданиями согласно спецификации API.
• Тестирование производительности: Анализ времени загрузки ресурсов (waterfall), размеров файлов, выявление "тяжелых" запросов или изображений. Использование режима Throttling для эмуляции медленных сетей (3G).

  # Пример критичного для QA: проверка статуса 404 на ресурс, необходимый для работы.
  # В фильтре Network можно выбрать "Has blocked cookies" или просто найти запросы с красным статусом (4xx, 5xx).
  

4. Performance & Lighthouse

• Performance (Производительность): Запись и анализ процессов рендеринга (рендер-дерево, перерасчет стилей, композиция). Выявление "долгих" задач (Long Tasks), лагов при вводе, причин "рывков" интерфейса.
• Lighthouse: Автоматизированный аудит для оценки производительности, доступности (a11y), лучших практик SEO и PWA. Генерация отчетов, которые часто являются частью критериев приемки. Проверка контрастности цветов, наличия alt-текстов, семантики заголовков — прямо в DevTools.

5. Application (Приложение)

• Работа с хранилищами клиента: Просмотр и манипуляция Local Storage, Session Storage, Cookies, IndexedDB. Критично для тестирования функций, зависящих от сохранения состояния (корзина, авторизация, настройки). Очистка хранилищ — стандартный шаг подготовки тестового окружения.
• Проверка манифеста и Service Workers: Для PWA-приложений проверка кэширования, оффлайн-режима.

6. Source (Источники) & Debugger

• Отладка JavaScript: Установка breakpoints, пошаговое выполнение кода (Step Into/Over/Out), наблюдение за Call Stack и Scope Variables. Позволяет глубоко понять причину бага в бизнес-логике.
• Работа с исходным кодом: Просмотр и редактирование (временно) исходных JS/TS/CSS файлов. Использование Pretty Print для читаемого вида минифицированных файлов.

  // Пример установки условной точки останова (Conditional Breakpoint) в Sources.
  // Правая клик на номере строки -> "Add conditional breakpoint".
  // Условие: value > 1000 (сработает только при выполнении условия).
  function calculateDiscount(price, value) {
      // Условная точка останова здесь
      if (value > 1000) {
          return price * 0.9;
      }
      return price;
  }
  

Практическое применение в рамках QA-процесса

• Локализация багов: Точное описание в bug report: "В консоли при отправке формы возникает ошибка TypeError: Cannot read properties of undefined (reading 'name'). Стек вызовов указывает на файл checkout.js:127. Request payload корректный, но ответ 500 с сообщением Internal Server Error".
• Воспроизведение: Использование Throttling и эмуляции устройств для воспроизведения проблем пользователей на "медленных" устройствах или сетях.
• Валидация исправлений: После фикса бага — проверка, что ошибки в Console исчезли, запросы в Network выполняются корректно, а интерфейс в Elements отображается верно.
• Автоматизация: Некоторые действия (например, мониторинг сетевых запросов) могут быть интегрированы в автотесты через Chrome DevTools Protocol (CDP) и библиотеки типа Puppeteer или Selenium 4.

Таким образом, DevTools — это не просто инструмент "посмотреть верстку". Для QA это мощная диагностическая станция, позволяющая проводить черный, серый и даже элементы белого ящика тестирования, глубже понимать работу приложения и предоставлять разработчикам максимально конкретную и полезную информацию для устранения дефектов.