Привет! Меня зовут Ваня Тришкин, я тестировщик в KTS.

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

Сегодня я не просто опишу панель DevTools, а приведу примеры сценариев, в которых она может понадобиться менеджеру. Заодно для каждого инструмента я дам небольшие упражнения, которые помогут закрепить материал и увереннее пользоваться тулзами на практике.

Оглавление

• Введение

• Как открыть DevTools

• Основные вкладки, которые нужны менеджеру

  • Вкладка Elements

    • Что такое HTML и теги

    • CSS: внешний вид элементов

    • DOM: структура страницы

    • Упражнения по Elements

  • Вкладка Console

    • Упражнения по Console

  • Вкладка Network

    • Упражнение по Network

• Как работают iframe, WebView и зачем использовать Eruda

  • iframe

  • WebView

  • Eruda

• Заключение

Введение

Небольшое предисловие для тех, кто не читал предыдущую статью. Большинство менеджеров считает DevTools инструментом для разработчиков и никогда его не открывает. Это упущение, которое замедляет работу и усложняет общение с командой.

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

1. Быстрая проверка багов. Не нужно слепо описывать баг: можно открыть DevTools и проверить, загружается ли нужный элемент, есть ли ошибки, чтобы передать команде разработки более понятный и точный багрепорт.

2. Проверка аналитики и событий. Перед запуском фичи можно быстро проверить, срабатывает ли нужное событие в аналитике, правильно ли отправляется клик по кнопке.

3. Понимание работы интерфейса. DevTools показывает, из чего состоит страница, какие стили на нее влияют и как она строится, чтобы аргументировать свои решения и понимать ограничения команды.

4. Ускорение коммуникации с командой. Владея DevTools, менеджер может самостоятельно отвечать на вопросы в духе «А что именно не загружается?», «А какая кнопка?» и «А что за ошибка?», а не передавать команде лишние неопределенные задачи.

Важно:

DevTools не делает менеджера разработчиком и не требует технической базы. Это инструмент для диагностики, проверки гипотез и сбора информации, чтобы вы могли принимать решения быстрее и увереннее.

Ниже пойдет речь о том, как пользоваться:

• вкладкой Elements для проверки и изменений интерфейса;

• вкладкой Console для отслеживания ошибок и чтения логов;

• вкладкой Network для проверки аналитики, загрузки данных и скорости страницы.

Как открыть DevTools

DevTools есть в большинстве браузеров (сложнее сказать, где их нет). Они открываются сочетанием клавиш:

• F12 или Ctrl + Shift + I (Windows);

• Cmd + Option + I (Mac).

После открытия DevTools появляются сбоку или снизу экрана:

Основные вкладки, которые нужны менеджеру

Вкладка Elements

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

Что такое HTML и теги

Для полноты картины остановимся и на этих понятиях. HTML (HyperText Markup Language) — это язык разметки, на котором строится каркас страницы. Он состоит из тегов, каждый из которых задает элемент интерфейса.

Например:

• <h1> — заголовок;

• <p> — абзац;

• <a> — ссылка;

• <button> — кнопка;

• <img> — изображение;

• <div> — блочный контейнер, используется для стилизации текстовых блоков (заголовков, абзацев, списков и т.д.);

• <span> — строчный контейнер, используется для стилизации отдельных элементов строки текста (слов, фраз и тд);

• <script> — подключение JavaScript-скриптов.

Наша статья не о тегах, поэтому не будем разбирать их подробно. Для первого знакомства можно почитать материал от HTML Academy (ссылку не оставляю, так как это не реклама), а для более глубокого погружения рекомендую статью на Хабре, в которой разбираются относительно редкие теги.

Для нас важно понять основную суть, поэтому пойдем дальше. Теги могут содержать атрибуты — дополнительные параметры, описывающие свойства элемента: название класса, уникальный идентификатор, ссылку или путь к изображению. Вот наиболее распространенные атрибуты:

• class — атрибут для стилизации;

• id — уникальный идентификатор;

• href — ссылка (для <a>);

• src — источник (для <img>, <script>).

Посмотрим на примере, как это работает. В HTML-файле можно встретить строку следующего вида:

<button class="cta" id="beautify">Сделать красиво</button>

Что это значит:

• <button> — тип тега, означает, что это кнопка;

• class="cta" — класс, используется для стилей (CSS) и аналитики (например, в настройке событий клика);

• id="beautify" — уникальный идентификатор кнопки, может использоваться для аналитики или поиска элемента;

• Сделать красиво — текст, который увидит пользователь на кнопке;

• </button> — закрывающий тег, завершает элемент кнопки.

Зная, как устроены HTML и теги, менеджер сможет проще ориентироваться во вкладке Elements. Это позволяет быстро понимать, из чего состоит интерфейс, какие элементы присутствуют на странице и правильно ли они отображаются.

CSS: внешний вид элементов

CSS отвечает за внешний вид элементов на странице: цвета, размеры, шрифты, отступы и расположение блоков. Эта аббревиатура расшифровывается как Cascading Style Sheets — каскадные таблицы стилей, набор правил, которые браузер использует, чтобы отображать элементы страницы в нужном виде.

Чтобы увидеть, какие стили применяются к элементу, откройте DevTools, перейдите на вкладку Elements и выберите нужный элемент на странице.

После выбора элемента справа в панели Styles будут отображены все свойства, влияющие на внешний вид: цвет, размер текста, отступы, рамки. Это помогает понять, как элемент выглядит в браузере и как его внешний вид соотносится с макетом.

#beautify {
  color: white;                  // цвет текста кнопки — белый
  background-color: hotpink;     // фон — ярко-розовый
  font-size: 18px;               // размер шрифта — 18 пикселей
  border: none;                  // убираем рамку по умолчанию
  border-radius: 6px;            // делаем закруглённые углы
  padding: 10px 16px;            // внутренние отступы по вертикали и горизонтали
  cursor: pointer;               // при наведении — курсор в виде руки
}

При необходимости можно временно изменить цвет, текст или отступ прямо в панели Styles, чтобы проверить гипотезу или подготовить скриншот для обсуждения с командой.

На всякий случай: все изменения, внесенные через вкладку Elements и панель Styles, являются временными и действуют только до обновления страницы. После перезагрузки страница возвращается к своему исходному виду. Если вы хотите зафиксировать изменение, его нужно передать команде для внесения в код.

DOM: структура страницы

DOM (Document Object Model) — это структура страницы, которую браузер создает из HTML. Ее можно представить как дерево, где каждый элемент (кнопка, заголовок, блок) является отдельной веткой.

Чтобы быстро найти нужный элемент на странице, используйте кнопку с иконкой курсора в левом верхнем углу DevTools и наведите ее на элемент, который хотите проверить.

Если элемент не виден или его сложно найти на странице, используйте поиск по Ctrl+F в панели Elements, чтобы найти нужный элемент по тексту, названию класса или id.

Упражнения по Elements

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

1. Откройте сайт kts.tech.

2. Найдите карточку «AI-Помощник на ПМЭФ» через Ctrl + F.

3. Измените цвет фона карточки на #111317.

4. Поменяйте цвет заголовка только этой карточки на #fcb3b3.

5. Измените текст описания карточки.

Вкладка Console

Вкладка Console показывает, что реально происходит на странице в момент ее работы. Здесь можно увидеть ошибки и предупреждения, которые помогут понять, почему кнопка не работает или что-то ломается.

Часто важно определить, на чьей стороне ошибка — в вашем продукте или на стороне сервиса, с которым настроена интеграция. Console помогает это проверить за пару минут: достаточно навести курсор на ссылку в ошибке, чтобы увидеть домен. Если указан ваш домен или путь, проблема, скорее всего, на вашей стороне. Если видите ошибку, связанную с доменом стороннего сервиса (например, vk.com, sentry.io или другой внешний API), баг может быть на их стороне.

Console также показывает логи, которые разработчики оставляют для отладки. Например, можно увидеть, отправилось ли событие статистики в Яндекс.Метрику или другое событие при клике на кнопку.

Кроме того, консоль позволяет вводить простые команды прямо в браузере. Например, можно ввести localStorage и посмотреть, какие данные сохраняются в браузере для текущего сайта. Это помогает проверить, сохранились ли настройки интерфейса (например, выбранная тема) или убедиться, что данные верно записываются при действиях пользователя.

Предупреждение: будьте внимательны при вводе команд в консоль. Если вводить команды, которые вы не понимаете, можно случайно остановить выполнение скриптов на странице или вызвать ее некорректную работу в текущей сессии. Новичкам я бы рекомендовал использовать Console для чтения логов и безопасных команд (например, console.log или localStorage), а для выполнения сложных действий предварительно советоваться с разработчиками.

Упражнения по Console

Чтобы научиться работать с Console, я предлагаю выполнить три простых упражнения.

Упражнение 1

1. Откройте сайт kts.tech.

2. Откройте вкладку Console.

3. Обновите страницу и проверьте, есть ли ошибки. Если да, то попробуйте определить, на чьей стороне проблема, посмотрев на домен в ошибке при наведении.

Упражнение 2

1. В той же вкладке Console выполните в консоли следующую команду:

console.log("Hello, PM!")

2. Убедитесь, что сообщение появилось в консоли, и посмотрите, как оно выглядит среди других логов.

Упражнение 3

1. Все в той же консоли выполните следующую команду:

localStorage

2. Посмотрите, какие данные хранятся в localStorage для этого сайта, и зафиксируйте, есть ли данные, связанные с интерфейсом или пользователем.

Вкладка Network

Вкладка Network в DevTools показывает, какие запросы отправляются с вашего приложения и какие ответы возвращает сервер. Это помогает понять, почему данные не загружаются, почему не отправляется форма или почему страница может грузиться медленно.

Чтобы начать, откройте DevTools и перейдите на вкладку Network. Перед проверкой лучше очистить список запросов, нажав значок с перечеркнутым кругом, чтобы видеть только новые запросы после вашего действия.

Когда обновляется страница или нажимается кнопка, в списке Network появляются запросы. Чтобы не запутаться среди картинок и шрифтов, можно включить фильтр XHR — он оставит только запросы к серверу.

После клика по нужному запросу открывается детальная информация. В разделе Headers можно увидеть, какой метод использовался (GET или POST), какой адрес, какие данные отправились на сервер, а в разделе Response — что вернул сервер. Здесь же виден код ответа, который помогает понять, что произошло: 200 означает, что все прошло успешно, 400 или 404 говорят об ошибке на стороне клиента, а 500 — о проблеме на стороне сервера.

Например, если пользователь жалуется, что кнопка «Отправить код» не работает, можно открыть Network, очистить запросы, нажать кнопку и посмотреть, появился ли запрос. Если он не появился, значит кнопка не отправляет запрос. Если запрос есть, но с кодом 500, значит проблема на сервере. Если код 200, но кнопка не сработала, можно открыть вкладку Response и проверить, что именно вернул сервер.

Упражнение по Network

Вновь закрепим знания.

1. Откройте сайт kts.tech.

2. Откройте DevTools и перейдите на вкладку Network.

3. Найдите в списке запросов данные, которые сервер отдал для карточки с названием Приложение «СмешАпп» к 20-летию Смешариков.

Как работают iframe, WebView и зачем использовать Eruda

iframe

iframe позволяет встраивать ваше веб-приложение в другой сайт. Это окно внутри страницы, в котором загружается ваш интерфейс и работает как обычная веб-страница: пользователь видит элементы и кликает по кнопкам, а к серверу встроенного приложения отправляются запросы.

Важно понимать, что использование iframe не меняет работу фронта. Приложение работает так же, как в браузере, и для проверки можно использовать DevTools. Например, для того, чтобы:

• посмотреть структуру и стили элементов (Elements);

• увидеть ошибки и логи (Console);

• проверить отправку запросов к серверу (Network).

WebView

WebView используется, чтобы встроить веб-приложение внутрь нативного мобильного приложения. Пользователь видит интерфейс как часть приложения, хотя внутри загружается веб-страница. Как и в случае с iframe, это не меняет работу фронта — интерфейс и запросы работают так же, как в браузере.

Чтобы проверить работу WebView, не нужно подключать устройство или ставить специальные инструменты. Достаточно:

1. открыть проект в браузере;

2. проверить отображение интерфейса;

3. посмотреть ошибки и логи в Console;

4. проверить, уходят ли запросы в Network.

Eruda

Eruda — это инструмент, который позволяет открыть DevTools прямо внутри приложения, даже если оно открыто в iframe или через WebView.

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

• увидеть структуру элементов;

• посмотреть ошибки и логи;

• проверить запросы.

Заключение

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

Вы можете проверять баги и гипотезы прямо в браузере, видеть, что происходит на странице, и давать команде конкретику вместо абстрактного «не работает». Это помогает экономить время, убирать лишние вопросы и принимать решения на основе реальных данных, а не догадок.

Вкладки Elements, Console и Network помогают понять, из чего состоит интерфейс, где возникает ошибка и что реально отправляется на сервер. Вам не нужно уметь программировать, чтобы использовать DevTools в ежедневной работе. Достаточно открыть панель, сделать пару кликов и за несколько минут найти то, что иначе заняло бы полдня переписки.

Чем чаще вы используете DevTools, тем быстрее и спокойнее начинаете решать задачи. Это простой, но сильный инструмент, который помогает менеджеру держать продукт под контролем и быть увереннее в работе.

Надеюсь, статья оказалась для вас полезной. Также предлагаю к прочтению другие материалы для менеджеров в нашем блоге:

• Все, что нужно знать менеджеру о QA

• Как дать разработчикам свободу при деплое приложений и ускорить процессы в команде

• Планировать нельзя сойти с ума: как не забыть ни про проекты, ни про людей

• 6 ошибок, из-за которых менеджеры-джуны остаются джунами