Консоль браузера в тестировании сайтов

Консоль браузера — один из самых полезных инструментов для тестирования фронтенда. Она помогает увидеть поведение сайта изнутри: ошибки JavaScript, сетевые запросы, состояние интерфейса, данные в хранилищах, производительность и следы пользовательских действий. Для тестировщика это быстрый способ ответить на вопросы: Чаще всего под “консолью браузера” имеют в виду DevTools: набор вкладок внутри инструментов разработчика. В Google Chrome, Edge и Яндекс Браузере они открываются через F12, Ctrl + Shift + I или Cmd + Option + I на Mac.

Роль DevTools в работе тестировщика

DevTools полезны почти в каждом виде тестирования интерфейсов: Когда сайт ведет себя странно, обычного описания “кнопка не работает” мало. Консоль дает контекст: какой запрос ушел, какой статус вернулся, была ли ошибка JavaScript, изменился ли DOM, сохранились ли данные в хранилище.

Основные вкладки и их польза для тестирования

Elements

Вкладка Elements показывает HTML-структуру страницы и примененные CSS-стили. Что здесь проверяют: Практические сценарии: 1. Кнопка видна, но клик не срабатывает Открываете Elements, находите кнопку, смотрите соседние блоки. Часто сверху лежит прозрачный слой с position: absolute или z-index. 2. Сообщение об ошибке отсутствует на экране Проверяете DOM. Сообщение может уже существовать в HTML, но быть скрытым через display: none, opacity: 0 или условный класс. 3. Верстка “поплыла” Смотрите реальные размеры блока, отступы, flex/grid-настройки, медиазапросы и перекрытия. Полезно знать:

Console

Вкладка Console — журнал ошибок, предупреждений и ручных команд. Что здесь смотрят: Для тестировщика это один из главных источников технических симптомов. Примеры типовых ошибок: Что можно делать вручную: 
document.title
Покажет заголовок страницы. 
document.querySelector('button')
Найдет первую кнопку на странице. 
document.querySelectorAll('input').length
Покажет количество полей ввода. 
localStorage
Покажет данные в localStorage. 
window.location.href
Покажет текущий URL. Практические сценарии: 1. После клика ничего не происходит Открываете Console, повторяете действие и смотрите, появляется ли ошибка. 2. Форма отправляется с пустыми данными Можно проверить содержимое полей и состояние переменных через JavaScript. 3. Нужно быстро проверить наличие элемента Достаточно выполнить document.querySelector(...). Полезные приемы:

Network

Вкладка Network показывает сетевую активность страницы: запросы к API, загрузку HTML, JS, CSS, изображений, шрифтов и других ресурсов. Для тестировщика это одна из самых сильных вкладок. Что здесь проверяют: Практические сценарии: 1. Нажали “Войти”, а входа нет Смотрите, ушел ли запрос авторизации. Если запроса нет, проблема в frontend-событии. Если запрос ушел и вернулся 401, проблема в данных или логике авторизации. Если пришел 500, проблема на backend. 2. Товар не добавляется в корзину Проверяете запрос на добавление. Сравниваете payload и response. 3. Данные на странице устарели Можно увидеть, идет ли запрос за свежими данными или страница берет старое содержимое из кэша. Полезные возможности:

Sources

Вкладка Sources полезна для более глубокой отладки JavaScript. Что здесь делают: Для тестировщика эта вкладка особенно ценна при сложных фронтовых багах. Практические сценарии: 1. После нажатия кнопки идет странная логика Ставите breakpoint на обработчик клика и смотрите, какие функции вызываются дальше. 2. Нужно понять, откуда берется ошибочное значение Останавливаете код в месте присвоения и проверяете текущее состояние переменных. 3. Форма блокируется без понятной причины Через breakpoint на submit или validation можно увидеть, на каком условии поток меняется. Тестировщику не обязательно владеть JavaScript на уровне разработчика, чтобы получать пользу от Sources. Даже базовое умение поставить breakpoint и посмотреть значения уже сильно ускоряет диагностику.

Application

Вкладка Application показывает клиентские данные, которые браузер хранит локально. Что здесь проверяют: Практические сценарии: 1. Пользователь вышел из аккаунта после обновления страницы Проверяете cookies и localStorage: сохранился ли токен, срок жизни, домен, путь. 2. После очистки данных сайт начинает работать корректно Смотрите, какие данные хранились в браузере и влияли на поведение. 3. Нужно воспроизвести баг в “чистом” состоянии Можно вручную удалить localStorage, cookies и кэш без полного сброса браузера. Полезные проверки:

Performance

Вкладка Performance помогает понять, где страница тормозит. Что можно увидеть: Практические сценарии: 1. Форма открывается с задержкой Записываете performance-профиль и смотрите, какая часть занимает больше всего времени. 2. Страница зависает на фильтрации товаров Можно увидеть, перегружает ли интерфейс JavaScript. 3. Анимации идут рывками Проверяете repaint, layout и нагрузку на главный поток.

Lighthouse

Lighthouse подходит для быстрой автоматической оценки страницы. Он помогает посмотреть: Для тестировщика это хороший способ собрать первичную техническую картину и найти зоны риска. Примеры пользы:

Security

Вкладка Security показывает состояние соединения и сертификата. Что можно проверить: Для повседневного тестирования вкладка требуется реже, но при работе с платежами, авторизацией и персональными данными она очень полезна.

Подход к тестированию через DevTools

Самый рабочий путь выглядит так:

1. Повторить действие пользователя

Например: открыть карточку товара, нажать “Добавить в корзину”.

2. Одновременно смотреть несколько вкладок

Обычно достаточно связки:

3. Зафиксировать технические симптомы

Например:

4. Сделать вывод

Такой вывод уже близок к качественному баг-репорту:
После нажатия на кнопку “Добавить в корзину” отправляется POST-запрос /cart/add, сервер возвращает 500, на фронте появляется ошибка в Console, кнопка остается в состоянии загрузки, товар в корзине отсутствует.

Полезные приемы для тестировщика

Очистка окружения

Перед повторной проверкой полезно:

Эмуляция устройства

Через DevTools можно включить мобильный режим и проверить:

Замедление сети

В Network можно выбрать Slow 3G или Fast 3G. Это помогает увидеть:

Снимки состояния

Скриншоты из DevTools, копия response, export HAR и текст ошибки из Console часто делают баг-репорт сильнее и понятнее для команды.

Примеры багов, которые удобно ловить через консоль

Сценарий 1. Кнопка не работает

Проверка:

Сценарий 2. Данные на странице устарели

Проверка:

Сценарий 3. Форма отправляется с ошибкой

Проверка:

Сценарий 4. После обновления страницы пользователь выходит из системы

Проверка:

Сценарий 5. Интерфейс тормозит

Проверка:

Что стоит включить в отчет после проверки

После исследования через DevTools отчет можно строить по простой схеме:

1. Сценарий

Что делали на сайте.

2. Ожидаемый результат

Что должно было произойти.

3. Фактический результат

Что произошло по факту.

4. Технические наблюдения

Что увидели в Console, Network, Elements, Application.

5. Предположение о зоне проблемы

Frontend, backend, интеграция, кэш, клиентское хранилище, верстка. Пример:
При отправке формы обратной связи запрос уходит на /api/feedback, сервер возвращает статус 400. В response приходит сообщение о пустом поле email, хотя поле заполнено. На фронте сообщение пользователю отсутствует. Вероятная зона проблемы: сериализация данных формы или серверная валидация.

Ошибки в работе с консолью

Частые промахи у начинающих тестировщиков: Самый точный результат дает связка нескольких источников: Console + Network + Elements + Application.

Итог

Консоль браузера превращает тестирование сайта из наблюдения “снаружи” в исследование реального поведения страницы. Для тестировщика это инструмент, который помогает: Минимальный рабочий набор для повседневной проверки сайтов: Когда этот набор входит в привычку, качество тестирования растет очень заметно.

Напоминание по организации работы

Вкладку с сайтом держите отдельно от вкладки с ответом. Вкладку с отчетом держите открытой весь урок. Так результаты исследования сохранятся, а текст отчета останется на месте.

Практическая работа

Тема: Тестирование сайта с помощью консоли браузера

Цель работы

Освоить инструменты DevTools для исследования сайта и научиться находить технические признаки ошибок через вкладки консоли браузера.

Результат работы

По итогам занятия студент:

Важно перед началом

Держите вкладку с заданием и вкладку с ответом отдельно от вкладки с исследуемым сайтом. Лучше открыть: Так текст отчета сохранится до конца пары.

Оснащение

Краткая схема работы

Во время практики студент использует вкладки DevTools: DevTools открываются через:

Ход практической работы

Этап 1. Подготовка среды

  1. Откройте сайт.
  2. Откройте DevTools.
  3. Переключитесь на вкладку Console.
  4. Очистите журнал.
  5. Во вкладке Network включите:
    • Preserve log
    • Disable cache
  6. Подготовьте файл отчета.

Что зафиксировать в отчете

Этап 2. Анализ ошибок через Console

Задание

  1. Обновите страницу.
  2. Посмотрите, появились ли ошибки или предупреждения.
  3. Выполните 3-5 действий на сайте:
    • открыть страницу
    • нажать кнопку
    • открыть форму
    • ввести данные
    • отправить форму
  4. После каждого действия смотрите сообщения в Console.

Что нужно найти

Что зафиксировать

Для каждого найденного события укажите:

Пример записи

После нажатия на кнопку "Войти" в Console появилась ошибка Uncaught TypeError. Ошибка возникла сразу после клика. Вероятная зона проблемы - обработчик кнопки на фронтенде.

Этап 3. Проверка запросов через Network

Задание

  1. Перейдите во вкладку Network.
  2. Отфильтруйте запросы по Fetch/XHR.
  3. Выполните действия, которые вызывают обмен с сервером:
    • авторизация
    • поиск
    • фильтрация
    • отправка формы
    • открытие карточки
  4. Выберите один или два запроса и изучите:
    • URL
    • метод
    • статус
    • payload
    • response

Что нужно определить

Что зафиксировать

По двум запросам оформите мини-анализ:

Пример записи

При отправке формы обратной связи ушел POST-запрос /api/feedback. Сервер вернул статус 400. В ответе пришло сообщение о некорректном поле email. Вероятная проблема связана с валидацией данных.

Этап 4. Исследование интерфейса через Elements

Задание

  1. Откройте вкладку Elements.
  2. Через инструмент выбора элемента выделите:
    • кнопку
    • поле ввода
    • сообщение об ошибке
    • всплывающее окно
  3. Изучите:
    • HTML-структуру
    • классы элемента
    • стили
    • размеры
    • скрытие через CSS

Что нужно проверить

Практическая задача

Выберите один элемент интерфейса и ответьте:

Пример записи

Кнопка присутствует в DOM, имеет класс btn-primary, визуально отображается. Поверх кнопки расположен блок с абсолютным позиционированием. Это может влиять на нажатие.

Этап 5. Проверка клиентских данных через Application

Задание

  1. Откройте вкладку Application.
  2. Изучите разделы:
    • Cookies
    • Local Storage
    • Session Storage
  3. Найдите данные, связанные с работой сайта:
    • токен
    • выбранный город
    • язык
    • тема
    • корзина
    • пользовательские настройки

Что нужно определить

Что зафиксировать

Опишите минимум два найденных значения:

Пример записи

В Local Storage найден ключ city_id. Значение соответствует выбранному городу. После смены города значение обновилось.

Этап 6. Ручные проверки через Console

Задание

Выполните в Console следующие команды и запишите результаты. 
document.title

window.location.href

document.querySelectorAll('input').length

localStorage

Дополнительное задание

Попробуйте найти первый заголовок страницы: 
document.querySelector('h1')
Если браузер вернул объект, раскройте его и посмотрите содержимое.

Что зафиксировать

Этап 7. Итоговое исследование сценария

Основное задание

Выберите один пользовательский сценарий и исследуйте его целиком через DevTools. Подходящие сценарии:

Что нужно сделать

  1. Описать сценарий.
  2. Выполнить его шаг за шагом.
  3. Посмотреть Console.
  4. Посмотреть Network.
  5. Посмотреть Elements.
  6. При необходимости посмотреть Application.
  7. Сформулировать технический вывод.

Формат вывода

Пример

Сценарий: отправка формы регистрации. Ожидание: учетная запись создается, пользователь получает подтверждение. Факт: форма осталась на месте, сообщение об успехе отсутствует. Console: ошибка Failed to fetch. Network: POST-запрос ушел, статус 500. Elements: блок ошибки в DOM отсутствует. Вывод: проблема связана с серверной обработкой регистрации и отсутствием пользовательского сообщения на фронтенде.

Дополнительное задание для сильных студентов

Исследуйте один баг или подозрительное поведение сайта и составьте краткий баг-репорт: [task_id id="21458"]

Открыть исходную публикацию