Инструменты тестировщика
Chrome DevTools для тестировщика: вкладки и поиск багов
Chrome DevTools – инструменты разработчика, встроенные в браузер. Они открываются клавишей F12 или пунктом "Просмотреть код" в контекстном меню и показывают тестировщику то, чего не видно на экране: разметку и стили в Elements, ошибки JavaScript в Console, запросы к серверу и коды ответов в Network. С DevTools к баг-репорту прикладывают текст ошибки, упавший запрос и ответ сервера, и разработчику не приходится угадывать причину.
- F12
- или Ctrl+Shift+I, на macOS Cmd+Option+I
- Network
- главная вкладка тестировщика: запросы, ответы и коды
- Chrome сегодня
- что изменилось с видео 2020 года, отмечено в тексте
Что такое DevTools и как их открыть
DevTools – набор инструментов для разработки веб-приложений, встроенный прямо в браузер. Разработчики собирают с ним страницы, тестировщики смотрят, что происходит у страницы внутри. Похожие инструменты есть во всех браузерах. Edge с 2020 года построен на том же движке Chromium, что и Chrome, и панели в нём те же. В Firefox набор похож, а в Safari инструменты называются Web Inspector и включаются в настройках.
Панель открывается клавишей F12 или сочетанием Ctrl+Shift+I, на macOS – Cmd+Option+I. Если щёлкнуть правой кнопкой по элементу страницы и выбрать "Просмотреть код" (в английском интерфейсе Inspect), DevTools откроются сразу на строке HTML, которая описывает этот элемент.
Через меню из трёх точек в правом верхнем углу панель прикрепляют справа, снизу или слева либо выносят в отдельное окно. Отдельное окно удобно при двух мониторах: на одном страница, на другом DevTools.
Elements: разметка и стили
Во вкладке Elements видно, как элемент записан в HTML, какого он размера и что о нём знают средства доступности (раздел Accessibility). Быстрее всего найти элемент кнопкой со стрелкой в левом верхнем углу панели (Ctrl+Shift+C, на macOS Cmd+Shift+C): после неё достаточно щёлкнуть по нужному месту страницы.
Разметку здесь можно править, и правка сразу видна на странице. В уроке я показываю приём на заголовке сайта. Если дописать в заголовок длинный текст, видно, не наезжает ли он на соседние элементы, а если стереть всё, кроме одного символа, или оставить заголовок пустым, видно, как вёрстка справляется и с этим. Правки живут до перезагрузки и видны только вам, поэтому скриншот с изменённой в DevTools ценой дефектом не считается.
Ниже разметки (или справа, если панель широкая) находится вкладка Styles с CSS элемента: шрифты и их размеры, цвета, внутренние и внешние отступы (padding и margin). Её сверяют с макетами дизайнера, где указано, каким должен быть каждый элемент. Если шрифт или цвет в вёрстке отличается от макета, это дефект.
Console: ошибки JavaScript
В Console попадают сообщения кода страницы. Ошибки выполнения JavaScript подсвечены красным, предупреждения жёлтым. Там же есть строка для команд, где можно выполнить свой скрипт на JavaScript.
Красная ошибка в консоли почти всегда означает дефект, даже если внешне страница выглядит нормально. Разбираться, почему упал скрипт, должен разработчик. От тестировщика нужны шаги, после которых ошибка появляется, и полный текст ошибки, скопированный из консоли в баг-репорт. Предупреждения тоже стоит заводить, потому что со временем они могут обернуться серьёзными ошибками.
Перед тем как заводить дефект, стоит проверить, что ошибка относится к самому сайту: реклама и сторонние виджеты тоже пишут в консоль. Список Default levels над журналом оставляет только ошибки или только предупреждения, а консоль перед проверкой полезно очистить, чтобы старые сообщения не путали. В нынешнем Chrome часть предупреждений о cookie, безопасности и совместимости собирается в отдельной панели Issues.
Пример из интернет-магазина: после нажатия "В корзину" счётчик товаров над корзиной не меняется. В Console в этот момент появляется красная ошибка Uncaught TypeError: Cannot read properties of undefined (reading 'id'), а справа от неё ссылка на файл и строку скрипта. В баг-репорт идут товар и шаги, полный текст ошибки и эта ссылка, и разработчик сразу видит, где упал код.
Network: запросы к серверу и ответы
Network я считаю самой важной вкладкой для тестировщика. В ней видно общение клиента и сервера: какие запросы отправила страница и что ответил сервер. Вкладка записывает только то, что произошло при открытых DevTools, поэтому её открывают до действия, а потом обновляют страницу или повторяют шаг.
Каждая строка таблицы – один запрос. По умолчанию показаны название (Name), код ответа (Status), тип (Type), инициатор (Initiator), размер (Size), время (Time) и шкала Waterfall, на которой видно, в каком порядке и как долго шли запросы. Метод и версию протокола (Method, Protocol) добавляют правым щелчком по заголовку таблицы. Щелчок по строке открывает подробности: заголовки (Headers), отправленные данные (Payload) и ответ сервера (Response).
Фильтры над таблицей отбирают запросы по типу. Главный для тестировщика фильтр Fetch/XHR показывает обращения страницы к серверу за данными (в видео 2020 года он называется XHR). Doc показывает сам HTML-документ страницы, CSS и JS отбирают стили и скрипты. Картинки собраны в Img, аудио и видео в Media, шрифты в Font. В WS попадают соединения WebSocket, по которым браузер и сервер обмениваются сообщениями в реальном времени, в Manifest попадает файл манифеста веб-приложения, а Other собирает всё остальное. В нынешнем списке есть и фильтр Wasm для модулей WebAssembly.
Пример из практики: кнопка "Отправить" в форме обратной связи ничего не делает. Если открыть Network и нажать её ещё раз, в списке появляется запрос с кодом 500, а в Console красная ошибка. Коды 4xx говорят об ошибке в запросе со стороны клиента, 5xx о сбое на сервере. В баг-репорт идут шаги, адрес запроса, код ответа, отправленные данные из Payload и текст ошибки из консоли, и разработчику не нужно искать проблему вслепую.
Disable cache
Отключает кэш, пока DevTools открыты. Страница загружается с сервера заново, и сохранённые раньше данные не влияют на результат проверки.
Preserve log
Сохраняет список запросов при перезагрузке и переходе на другую страницу. Без этого флажка журнал очищается, и запрос, после которого страница ушла на другой адрес, пропадает. Собранный журнал выгружают в файл кнопкой Export HAR и прикладывают к баг-репорту.
Throttling
Выпадающий список, где по умолчанию стоит No throttling, имитирует медленную сеть или её отсутствие (Offline), и отдельный сетевой адаптер для этого не нужен. В видео пресеты называются Fast 3G и Slow 3G, в нынешнем Chrome это Fast 4G, Slow 4G и 3G. Свою скорость задают в отдельном профиле.
Скорость, безопасность и мобильный вид
Остальные вкладки и кнопки нужны реже, но в отдельных задачах выручают. Названия даны по нынешнему Chrome.
Performance
Запись работы страницы: кнопка Record and reload перезагружает страницу и снимает, что происходило при загрузке. В сводке видно, сколько времени ушло на загрузку (Loading), скрипты (Scripting), расчёт и отрисовку (Rendering, Painting), системные процессы (System) и простой (Idle). Если загрузка стала заметно дольше прежней, запись сохраняют в файл и прикладывают к баг-репорту, а разработчик открывает её у себя и видит ту же картину. В нынешнем Chrome панель при открытии сразу показывает метрики Core Web Vitals текущей страницы: LCP, CLS и INP.
Privacy and security
В видео эта панель называется Security, новое название у неё с Chrome 134. Она показывает, защищено ли соединение по HTTPS, и даёт открыть сертификат. Стоит проверить, не загружает ли сайт данные с других серверов по незащищённому HTTP: для платёжных и личных данных это риск. О таком ресурсе сообщают разработчику или уточняют у аналитика, разрешено ли это требованиями.
Lighthouse
В видео эта панель не разбирается. Она проверяет страницу и выдаёт отчёт с оценками производительности, доступности, соответствия лучшим практикам и SEO, и к каждой оценке прилагается список замечаний. При первом знакомстве со страницей отчёт подсказывает, куда смотреть.
Режим устройства
Кнопка с телефоном и планшетом рядом со стрелкой выбора элемента (Ctrl+Shift+M, на macOS Cmd+Shift+M) показывает страницу в разрешении выбранного устройства, поворачивает экран и замедляет сеть. В видео выбран Pixel 2, в нынешнем списке устройства новее, а разрешение можно задать вручную. Это выручает, когда мобильной лаборатории нет, но имитирует только экран, поэтому поведение на настоящем телефоне проверяют отдельно.
Sensors
Открывается через меню из трёх точек, пункты More tools и Sensors. Здесь подменяют геолокацию, как будто устройство находится в другом городе, например в Лондоне, и положение телефона в пространстве. Настоящий Android-телефон можно подключить к компьютеру по USB и открыть его страницы в DevTools через адрес chrome://inspect.
Пример: геолокация
Сайт доставки еды показывает рестораны рядом с пользователем. В Sensors тестировщик подменяет координаты на другой город и проверяет, что список ресторанов и стоимость доставки сменились, а для места, куда доставки нет, появилось понятное сообщение вместо пустой страницы.
Видеоурок, шпаргалки и тренажёр
Я разбираю DevTools в четырнадцатом уроке курса "Тестировщик с нуля" на YouTube. Урок записан в 2020 году, поэтому названия панелей и пунктов на этой странице приведены по нынешнему Chrome. В бесплатном базовом курсе по тестированию теме посвящён урок "Работа с Devtools", и после теории в нём идут задания.
Шпаргалка по DevTools собирает горячие клавиши и панели на одной странице, а в её симуляторе видно, что появляется в DevTools после нажатия на элемент. Куки, кэш и хранилища браузера, которые лежат во вкладке Application, разобраны в отдельной шпаргалке. В тренажёре нужно открыть DevTools на странице с заданием и найти в них ответ на вопрос.
Курсы по теме
Вопросы и ответы
Как открыть DevTools в Chrome?
Клавишей F12 или сочетанием Ctrl+Shift+I, на macOS Cmd+Option+I. Можно и щёлкнуть правой кнопкой по элементу страницы и выбрать "Просмотреть код": панель откроется сразу на HTML этого элемента.
Какие вкладки DevTools нужны тестировщику?
Чаще всего Network, Console и Elements. Network показывает запросы к серверу, их коды и ответы, Console показывает ошибки JavaScript, а Elements разметку и стили элемента. В отдельных задачах пригодятся Performance для скорости, Privacy and security для проверки HTTPS, Lighthouse и режим устройства для мобильной вёрстки.
Что делать, если в консоли красная ошибка?
Повторить шаги и проверить, что ошибка появляется именно после них, затем завести баг-репорт с шагами воспроизведения и полным текстом ошибки из консоли. Разбираться в причине должен разработчик. Сначала стоит проверить, что ошибку выдаёт сам сайт, а не реклама или сторонний виджет.
Как проверить сайт на медленном интернете?
Во вкладке Network открыть список No throttling и выбрать медленный профиль, например 3G, или Offline, чтобы посмотреть, как страница ведёт себя без сети. Такой же список есть в режиме устройства, а свою скорость можно задать в отдельном профиле.
Можно ли в DevTools проверить мобильную версию сайта?
Вёрстку можно: режим устройства (Ctrl+Shift+M) показывает страницу в разрешении выбранного телефона и поворачивает экран. Это имитация экрана в настольном браузере, поэтому поведение на настоящем телефоне проверяют отдельно.
Сохраняются ли изменения из Elements на сайте?
Нет. Правки в Elements видны только в вашем браузере и пропадают после перезагрузки. Ими удобно проверять, как вёрстка переносит длинный текст, но скриншот с изменённой ценой или надписью дефектом не считается.
Посмотреть программы курсов
Программа каждого курса открыта целиком: видны все модули, уроки и число шагов.