Что такое DevTools

DevTools — инструменты разработчика, встроенные в браузер. Через них можно заглянуть внутрь страницы: посмотреть HTML и CSS, ошибки JavaScript, запросы к серверу и данные, которые сайт хранит в браузере. Устанавливать ничего не нужно.

Как открыть

В Chrome DevTools открываются по F12 или сочетанием клавиш:
  • Ctrl + Shift + I — Windows и Linux;
  • Cmd + Option + I — macOS.
Ещё один способ — нажать правой кнопкой на элемент страницы и выбрать Inspect. В этом случае DevTools сразу покажет выбранный элемент.

Как DevTools помогает найти проблему

Допустим, вы нажали кнопку «Сохранить», но ничего не произошло. По самой странице непонятно, в чём дело.
Можно открыть DevTools и посмотреть, что произошло после клика:
  • появилась ли ошибка JavaScript;
  • отправился ли запрос на сервер;
  • что было отправлено в запросе;
  • что ответил сервер.
Так из «кнопка не работает» можно получить гораздо больше информации. Например: «после клика запрос отправляется, но сервер отвечает 500».
Это и называют локализацией бага — мы пытаемся понять, в какой части системы возникает проблема. Точную причину удаётся найти не всегда, но даже несколько дополнительных деталей сильно упрощают разбор бага.

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

Elements

Во вкладке Elements находится HTML-разметка страницы и стили элементов.
Выберите элемент на странице — и сможете посмотреть, как он устроен и какие CSS-свойства к нему применяются.
Сюда стоит заглянуть, если:
  • элемента не видно;
  • текст или атрибут отличаются от ожидаемых;
  • неправильный цвет, размер или отступ;
  • элемент находится не там, где должен.
Например, кнопка по макету должна быть шириной 200 px, а на странице выглядит заметно уже. В Elements можно выбрать кнопку и посмотреть её текущую ширину и стили.

Console

В Console браузер выводит ошибки JavaScript, предупреждения и сообщения от страницы.
Если после какого-то действия интерфейс перестал реагировать, откройте Console и повторите действие. Новая красная ошибка может подсказать, что выполнение JavaScript прервалось.
Например, нажимаем «Добавить в корзину» — ничего не происходит, а в Console в этот момент появляется ошибка.

Network

В Network видны запросы между браузером и сервером.
Для каждого запроса можно посмотреть:
  • куда он отправился;
  • каким методом;
  • какие данные браузер отправил;
  • какой HTTP-статус вернулся;
  • что сервер прислал в ответ.
Представим, что на странице не появился список заказов. Открываем Network и смотрим запрос за заказами.
Запрос вообще не появился — одна ситуация.
Появился и получил 500 — другая.
Получил 200 и правильные данные, но список всё равно пустой — третья.
В интерфейсе результат один: заказов нет. Network помогает увидеть, что происходило до этого.

Application

В Application можно посмотреть данные, которые сайт сохранил в браузере: cookie, local storage и session storage.
Эта вкладка пригодится, когда проверяете авторизацию, сохранение настроек или состояние пользователя.
Например, пользователь переключил язык сайта на английский. После перезагрузки снова появился русский. В Application можно проверить, сохранилось ли выбранное значение в браузере.

Lighthouse

Lighthouse автоматически проверяет страницу и собирает отчёт.
Он может найти проблемы с производительностью, веб-доступностью, SEO и некоторыми другими характеристиками страницы.
Это не замена ручному тестированию. Скорее быстрый способ получить список мест, на которые стоит обратить внимание.

С чего начать

Нет правила, что всегда нужно открывать одну и ту же вкладку. Отталкивайтесь от того, что сломалось.
Не загрузились данные → начните с Network. Посмотрите, был ли запрос и что ответил сервер.
Нажимаете кнопку, а ничего не происходит → посмотрите Console, затем Network.
Элемент выглядит не как в макете → откройте Elements.
Сайт забывает авторизацию или настройки → загляните в Application.
Со временем это становится привычным: увидели проблему → подумали, что происходит за интерфейсом → открыли подходящую вкладку.

Не забудьте открыть DevTools заранее

Если хотите посмотреть запрос в Network, откройте DevTools до нужного действия.
Например, чтобы посмотреть запросы при загрузке страницы:
  1. Откройте DevTools.
  2. Перейдите во вкладку Network.
  3. Перезагрузите страницу.
  4. Посмотрите появившиеся запросы.
Если открыть DevTools уже после загрузки страницы, запросов, которые произошли раньше, в списке не будет.

На собеседовании

На собеседовании важно не перечислить все вкладки DevTools, а объяснить, как с их помощью исследовать проблему. Попробуйте ответить сами, прежде чем открыть ответ.
juniorначальный уровень знаний
1. Что такое DevTools и для чего они нужны QA-инженеру?
2. Кнопка не реагирует на клик. С чего начать проверку?
3. На странице нет списка данных. Что можно узнать во вкладке Network?
4. Что такое локализация бага?
middleболее продвинутый уровень
5. Почему DevTools нужно открыть до воспроизведения проблемы?
6. Сайт забывает выбранный язык после перезагрузки. В какой вкладке искать причину?
Вопросы по остальным темам собраны на странице Вопросы на собеседовании QA по DevTools.
НазадДалее