Инструменты разработчика в браузере (DevTools): как тестировщик использует их без знания кода

Зачем это нужно?

Представьте, что вы покупаете автомобиль и хотите убедиться, что под капотом всё в порядке — двигатель работает, провода не перепутаны, масло не течёт. Снаружи машина может выглядеть идеально, но именно «под капотом» скрываются настоящие проблемы.

Веб-сайты устроены похожим образом. Снаружи вы видите красивую страницу с кнопками, картинками и текстом. Но «под капотом» — сотни строк кода, запросы к серверу, загружаемые файлы и многое другое. Иногда страница выглядит нормально, но что-то работает неправильно: кнопка не реагирует, данные не сохраняются, изображение не загружается.

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

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

Теория

Что такое DevTools?

DevTools (сокращение от англ. Developer Tools — «инструменты разработчика») — это специальная панель, встроенная прямо в браузер. Она позволяет «заглянуть внутрь» любой веб-страницы: посмотреть её структуру, проверить, какие файлы загружаются, увидеть ошибки, которые пользователь не видит, и многое другое.

DevTools есть во всех популярных браузерах:

Google Chrome — самый распространённый вариант, его мы будем использовать как основной пример
Mozilla Firefox — очень похожие DevTools, отличаются лишь деталями интерфейса
Microsoft Edge — практически идентичен Chrome
Safari — есть, но нужно сначала включить в настройках

💡 Важно для начинающих: DevTools — это не какая-то программа, которую нужно скачивать. Они уже встроены в ваш браузер. Вы просто «включаете» их, и они появляются.

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

Есть несколько способов — выберите тот, который вам удобнее:

Способ 1 — Горячая клавиша (самый быстрый):
Нажмите клавишу F12 на клавиатуре. DevTools откроются сразу.

Способ 2 — Сочетание клавиш:

Windows / Linux: Ctrl + Shift + I
Mac: Cmd + Option + I

Способ 3 — Через меню браузера:
Нажмите правой кнопкой мыши на любом месте страницы → выберите пункт «Просмотр кода» (или «Inspect» / «Исследовать элемент»).

После открытия DevTools вы увидите панель — обычно она появляется снизу или справа от страницы. Не пугайтесь большого количества вкладок и информации — мы разберём только то, что нужно тестировщику-новичку.

Главные вкладки DevTools для тестировщика

DevTools состоят из нескольких разделов (вкладок). Рассмотрим пять самых важных для QA-специалиста.

Вкладка 1: Elements (Элементы)

Что это такое: Эта вкладка показывает «скелет» страницы — её структуру. Технически это называется HTML (HyperText Markup Language — язык разметки гипертекста). Можно представить HTML как строительные блоки: каждый блок — это элемент страницы (заголовок, кнопка, поле ввода, картинка).

Зачем тестировщику:

Проверить, правильно ли отображается текст на странице
Убедиться, что кнопка «активна» или «неактивна» в нужный момент
Проверить, что элемент вообще присутствует на странице (даже если он скрыт)
Найти точное название кнопки или поля — это нужно при написании тест-кейсов (описаний шагов тестирования)

Как пользоваться без кода:

Откройте любой сайт, например главную страницу поисковика. Нажмите F12, перейдите на вкладку Elements. Наведите курсор на любой элемент страницы — в панели DevTools он автоматически подсветится. И наоборот: наведите в DevTools на строку кода — на странице подсветится соответствующий элемент.

Это очень удобно, когда нужно понять: «А вот эта кнопка — она вообще есть в коде, или её просто не видно?»

🔍 Аналогия: Вкладка Elements — это как рентген страницы. Снаружи вы видите красивый дизайн, а рентген показывает «кости» — саму структуру.

Вкладка 2: Console (Консоль)

Что это такое: Консоль — это место, куда браузер выводит сообщения об ошибках и предупреждениях. Когда что-то идёт не так «внутри» страницы, браузер пишет об этом именно здесь.

Зачем тестировщику:

Обнаружить JavaScript-ошибки (JavaScript — это язык программирования, который делает страницы «живыми»: анимации, проверки форм, динамические обновления). Когда в нём что-то сломано, консоль покажет красную ошибку.
Убедиться, что на странице нет скрытых проблем, которые пользователь не замечает визуально
Зафиксировать ошибку для отчёта о баге (описания найденной проблемы)

Что вы увидите в консоли:

Сообщения в консоли бывают трёх типов:

🔴 Красные — это ошибки. Что-то сломано и не работает.
🟡 Жёлтые — это предупреждения. Что-то работает, но не так, как должно.
⚪ Белые / серые — это информационные сообщения. Всё нормально.

Как тестировщик-новичок, обращайте внимание в первую очередь на красные сообщения. Их наличие — это уже повод написать баг-репорт (отчёт об ошибке).

🔍 Аналогия: Консоль — как журнал ошибок в лифте. Снаружи лифт едет нормально, но в журнале уже записано: «Датчик 3 неисправен». Вы это видите, хотя пассажиры — нет.

Вкладка 3: Network (Сеть)

Что это такое: Эта вкладка показывает все запросы, которые страница отправляет на сервер (и ответы, которые получает обратно).

Объясним простыми словами: Когда вы открываете сайт, ваш браузер «просит» сервер прислать картинки, тексты, скрипты, данные. Каждая такая «просьба» — это запрос. Вкладка Network показывает список всех этих запросов и их статус.

Зачем тестировщику:

Проверить, загрузились ли все нужные файлы (картинки, шрифты, данные)
Увидеть HTTP-статус ответа сервера:
- 200 — всё хорошо, файл получен
- 404 — файл не найден (классическая ошибка «страница не найдена»)
- 500 — ошибка на сервере
Проверить, как долго загружается страница
Убедиться, что форма отправляет данные на правильный адрес

Что такое HTTP-статус: Это числовой код, которым сервер отвечает браузеру. Представьте, что вы звоните в службу доставки:

200 — «Да, ваш заказ получен, всё отлично»
404 — «Такого заказа не существует»
500 — «У нас внутренние проблемы, перезвоните позже»

🔍 Аналогия: Вкладка Network — как квитанции о доставке. Вы видите: что заказали, что пришло, что потерялось, и сколько времени это заняло.

Вкладка 4: Application (Приложение)

Что это такое: Эта вкладка показывает данные, которые сайт хранит прямо в вашем браузере. Самое важное для тестировщика здесь — Cookies и Local Storage.

Cookies (куки) — это небольшие файлы, которые сайт сохраняет у вас в браузере. Например: «этот пользователь уже вошёл в систему» или «этот пользователь выбрал русский язык». Представьте маленький стикер, который сайт наклеивает на ваш браузер, чтобы «запомнить» вас.

Local Storage (локальное хранилище) — похожая штука, только для хранения чуть большего объёма данных прямо в браузере.

Зачем тестировщику:

Проверить, создаётся ли cookie при входе в систему
Убедиться, что при выходе из системы cookie удаляется
Проверить содержимое cookie — нет ли там лишних или неправильных данных
Очистить cookie вручную, чтобы протестировать сценарий «первого входа»

Вкладка 5: Responsive Design Mode (Режим адаптивного дизайна)

Что это такое: Этот инструмент позволяет смотреть на сайт «глазами» разных устройств — телефонов, планшетов, ноутбуков с разными размерами экрана — прямо в браузере, не имея реального устройства.

Как включить:

Нажмите иконку с двумя прямоугольниками (телефон + планшет) в верхней части панели DevTools
Или используйте сочетание: Ctrl + Shift + M (Windows) / Cmd + Shift + M (Mac)

Зачем тестировщику:

Проверить, как выглядит сайт на мобильном телефоне
Убедиться, что кнопки не «съехали», текст читается, ничего не обрезано
Протестировать разные размеры экрана без покупки десяти разных устройств

🔍 Аналогия: Это как примерочная в магазине, где можно увидеть, как одежда выглядит на разных фигурах — без того, чтобы просить десятерых разных людей её примерять.

Пример из практики

Сценарий: Тестируем форму обратной связи

Представьте, что вы тестируете сайт интернет-магазина. Ваша задача — проверить форму обратной связи. Пользователи жалуются, что после нажатия кнопки «Отправить» ничего не происходит.

Шаг 1. Открываем страницу и DevTools

Открываем страницу с формой. Нажимаем F12. DevTools открылись.

Шаг 2. Проверяем Console перед отправкой

Переходим на вкладку Console. Смотрим: есть ли уже красные ошибки ещё до того, как мы нажали кнопку? Допустим, видим:

Uncaught ReferenceError: sendForm is not defined
    at HTMLButtonElement.onclick

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

Шаг 3. Фиксируем ошибку

Мы нашли баг. Теперь создаём баг-репорт. Без DevTools мы бы только написали: «Кнопка не работает». С DevTools мы пишем конкретно:

Описание бага:
При нажатии на кнопку «Отправить» в форме обратной связи ничего не происходит.

Ошибка в консоли:
Uncaught ReferenceError: sendForm is not defined

Шаги для воспроизведения:

Открыть страницу /contact

Заполнить форму

Нажать кнопку «Отправить»

Открыть DevTools → Console

Ожидаемый результат: Форма отправляется, появляется сообщение «Спасибо за обращение».

Фактический результат: Ничего не происходит. В консоли красная ошибка.

Шаг 4. Проверяем Network

Переходим на вкладку Network. Нажимаем кнопку «Отправить» ещё раз. Смотрим: появился ли новый запрос в списке? Если нет — форма не отправляет данные вообще. Это подтверждает нашу находку.

Если запрос появился, но рядом с ним стоит красный статус 500 — значит данные дошли до сервера, но сервер вернул ошибку. Это другой тип бага, и он требует другого описания.

Дополнительный пример: проверяем, как сайт выглядит на телефоне

Предположим, дизайнер сообщил, что кнопка «Купить» должна быть видна на мобильном экране без прокрутки. Проверяем:

Открываем нужную страницу
Открываем DevTools (F12)
Нажимаем иконку адаптивного режима (или Ctrl + Shift + M)
В выпадающем списке выбираем устройство — например, iPhone SE
Смотрим на экран: видна ли кнопка «Купить» без прокрутки вниз?

Если кнопка «уехала» вниз и её не видно — это баг. Описываем его с указанием устройства и скриншотом.

Практика

Выполните следующие упражнения самостоятельно. Для них вам понадобится только браузер (рекомендуется Google Chrome).

Упражнение 1. Знакомство с DevTools

Что делать:

Откройте любой сайт — например, https://www.wikipedia.org
Нажмите F12, чтобы открыть DevTools
Найдите вкладки: Elements, Console, Network, Application
Перейдите на вкладку Elements
Наведите курсор на логотип Википедии прямо на странице (не в DevTools)
Посмотрите, какой элемент подсветился в панели DevTools

Что должно получиться: Вы увидите, что при наведении на элемент страницы соответствующий код в DevTools подсвечивается синим. Это и есть «рентген» страницы в действии.

Зафиксируйте: Запишите в блокнот, как называется элемент, который подсветился (там будет что-то вроде <img ...> или <a ...>).

Упражнение 2. Охота за ошибками в консоли

Что делать:

Откройте несколько разных сайтов (попробуйте 3–5 разных: новостные, интернет-магазины, сайты компаний)
На каждом сайте открывайте DevTools и переходите на вкладку Console
Смотрите: есть ли красные или жёлтые сообщения?

Что должно получиться: Вы, скорее всего, обнаружите, что на многих популярных сайтах тоже есть предупреждения и иногда ошибки в консоли. Это нормально — реальные сайты не всегда идеальны.

Зафиксируйте: Если нашли красную ошибку — скопируйте её текст и запишите, на каком сайте она была. Попробуйте объяснить своими словами, что произошло (не обязательно точно, главное — попытаться).

Упражнение 3. Проверка мобильного вида

Что делать:

Откройте сайт https://www.booking.com (или любой другой сайт с кнопками и формами)
Откройте DevTools (F12)
Включите режим адаптивного дизайна (Ctrl + Shift + M)
Выберите в списке устройств iPhone SE (маленький экран)
Посмотрите: всё ли видно? Не съехали ли кнопки? Читается ли текст?
Теперь выберите iPad (большой экран) — сравните разницу

Что должно получиться: Вы увидите, что на разных устройствах сайт выглядит по-разному. Иногда что-то «ломается» на маленьких экранах.

Зафиксируйте: Запишите: нашли ли вы что-то, что выглядит некорректно на маленьком экране? Как бы вы описали это как баг?

Упражнение 4. Статусы загрузки в Network

Что делать:

Откройте DevTools (F12) и сразу перейдите на вкладку Network
Убедитесь, что запись включена (должна быть красная точка — кнопка «Record»)
Откройте страницу https://httpstat.us/404 — это специальная страница-тренажёр, которая намеренно возвращает ошибку 404
Посмотрите на список запросов в Network — найдите первый запрос (он будет к адресу httpstat.us)
Посмотрите на колонку Status — там будет 404
Теперь откройте https://httpstat.us/200 и сравните

Что должно получиться: Вы увидите разницу между статусом 200 (зелёный или нейтральный) и 404 (красный). Именно так тестировщик проверяет: правильно ли сервер отвечает на запросы.

Зафиксируйте: Запишите: как визуально отличаются статусы 200 и 404 в интерфейсе DevTools вашего браузера?

Итоги урока

DevTools — это встроенный в браузер инструмент, который позволяет «заглянуть внутрь» любой веб-страницы. Открывается клавишей F12.
Вкладка Elements показывает структуру страницы — помогает проверить, существует ли элемент и как он называется.
Вкладка Console показывает скрытые ошибки и предупреждения — красные сообщения означают, что что-то сломано.
Вкладка Network показывает все запросы к серверу и их статусы — коды 200, 404, 500 говорят о том, что произошло.
Вкладка Application хранит данные браузера — cookies и Local Storage — и позволяет их проверять и очищать.
Режим адаптивного дизайна позволяет проверить сайт на разных устройствах без покупки реальных гаджетов.
Тестировщику не нужно понимать весь код — достаточно уметь читать ошибки, замечать аномалии и фиксировать их в баг-репорте.
Использование DevTools делает баг-репорты более точными и информативными, что ускоряет работу разработчиков.