Devtools

Question 1

Что такое DevTools и зачем он нужен тестировщику?

Accepted Answer

DevTools — это встроенные инструменты браузера для анализа и отладки веб-приложений.

Тестировщик использует DevTools для:
Анализа сетевых запросов.
Поиска ошибок в консоли.
Проверки HTML/CSS.
Анализа cookies, localStorage.
Локализации дефектов.

Пример:
Кнопка не работает → через DevTools можно понять, уходит ли запрос и какой ответ приходит.

Question 2

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

Accepted Answer

Elements — структура HTML и стили.
Console — ошибки JavaScript.
Network — сетевые запросы.
Application — cookies, storage.
Performance — производительность.

Пример:
Ошибка → сначала Console, потом Network.

Question 3

Как работать с вкладкой Network?

Accepted Answer

Network показывает все HTTP-запросы.

Тестировщик проверяет:
URL.
Метод (GET, POST).
Статус-код.
Headers.
Request/Response body.
Время ответа.

Пример:
Нажали кнопку → появился запрос → проверяем ответ API.

Question 4

Как найти баг через Network?

Accepted Answer

Алгоритм:
Сделать действие.
Найти запрос.
Проверить статус-код.
Проверить тело ответа.

Пример:
Кнопка "Войти" не работает:
Нет запроса → проблема фронта.
Есть 500 → проблема бэка.
Есть 200, но ошибка → проблема логики.

Question 5

Что проверять в Response?

Accepted Answer

Структуру JSON.
Наличие полей.
Типы данных.
Соответствие требованиям.

Пример:
Ожидается поле "token", а его нет → дефект.

Question 6

Что проверять в Request?

Accepted Answer

Передаваемые данные.
Headers.
Authorization.

Пример:
Пароль не отправился → проблема фронта.

Question 7

Как работать с вкладкой Console?

Accepted Answer

Console показывает ошибки JavaScript.

Тестировщик:
Ищет ошибки.
Анализирует stack trace.
Понимает, где сломалось.

Пример:
Uncaught TypeError → ошибка в JS → фронт сломан.

Question 8

Как понять, фронт или бэк виноват?

Accepted Answer

Нет запроса → фронт.
Есть запрос, ошибка 5xx → бэк.
Ответ 200, но UI сломан → фронт.

Пример:
API вернул данные, но UI пустой → проблема фронта.

Question 9

Как работать с вкладкой Elements?

Accepted Answer

Позволяет:
Проверять HTML.
Проверять CSS.
Изменять элементы.

Пример:
Кнопка есть, но скрыта → проблема стилей.

Question 10

Что можно проверить в Application?

Accepted Answer

Cookies.
LocalStorage.
SessionStorage.
Токены.

Пример:
Токен не сохранился → пользователь разлогинивается.

Question 11

Как проверять авторизацию через DevTools?

Accepted Answer

Проверить:
Authorization header.
Cookies.
Токен.

Пример:
Нет токена → запрос возвращает 401.

Question 12

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

Accepted Answer

Смотреть:
Время ответа.
Задержки.
Большие запросы.

Пример:
Страница грузится 5 секунд → проблема производительности.

Question 13

Какие типичные баги находят через DevTools?

Accepted Answer

Нет запроса.
Неверный URL.
Ошибка 500.
Неверный JSON.
Проблемы с авторизацией.
Ошибки JS.

Пример:
API возвращает 200, но JSON пуст → баг.

Question 14

Пример задачи с собеса: "Кнопка не работает"

Accepted Answer

Алгоритм:
Нажать кнопку.
Открыть Network.

Если:
Нет запроса → фронт.
Есть 500 → бэк.
Есть 200, но нет результата → логика.

Question 15

Пример задачи: "Данные не отображаются"

Accepted Answer

Проверка:
Есть ли запрос.
Что вернул API.
Есть ли данные в JSON.

Вывод:
Если API вернул данные → проблема UI.

Question 16

Пример задачи: "Пользователь разлогинивается"

Accepted Answer

Проверка:
Есть ли токен.
Сохраняется ли он.
Передается ли в запросах.

Вывод:
Если токен не передается → проблема авторизации.

Question 17

Как объяснить DevTools на собесе?

Accepted Answer

DevTools — это основной инструмент для анализа веб-приложений, который позволяет проверять сетевые запросы, ошибки JavaScript, данные и поведение системы.

С его помощью можно быстро определить, на каком уровне находится дефект: фронтенд, бэкенд или интеграция.