Как вы используете DevTools при тестировании?

Основные вкладки:

• Elements — HTML и CSS страницы: проверить вёрстку, найти скрытый элемент, временно поменять стиль или текст, чтобы показать проблему.
• Console — ошибки и предупреждения JavaScript. Красная ошибка при нажатии кнопки — частая причина «ничего не происходит».
• Network — все запросы страницы: метод, URL, статус, заголовки, тело запроса и ответа, время. Здесь видно, отправил ли фронтенд правильные данные и что ответил сервер. Есть фильтр по типу (Fetch/XHR — запросы к API), сохранение логов при переходах (Preserve log), копирование запроса в формате cURL, режим медленной сети (throttling) и отключение кэша.
• Application — cookies, localStorage, sessionStorage, кэш, service workers: можно посмотреть, удалить или изменить значения.
• Device toolbar — эмуляция мобильных устройств и разрешений экрана.
• Lighthouse / Performance — производительность и доступность страницы.

Как локализовать баг: смотрим запрос в Network. Фронтенд отправил неверные данные — ошибка фронтенда. Данные верные, а сервер ответил 500 или неверным содержимым — бэкенда. Ответ верный, но на экране неправильно — снова фронтенд.

Не применяется промокод. В Network видим POST /api/cart/promo с телом {"code": "SALE10 "} — с пробелом в конце. Ответ 422. Значит, проблема на фронтенде: не обрезаются пробелы. В баг-репорт — скриншот запроса и cURL.