Что такое Chrome DevTools

Chrome DevTools (Developer Tools) — это набор инструментов, встроенных непосредственно в браузер Google Chrome.

Они позволяют анализировать содержимое веб-страницы и взаимодействие браузера с сайтом. Например, с помощью DevTools можно посмотреть структуру HTML-документа, изменить CSS, выполнить JavaScript-код, проверить сетевые запросы и изучить загружаемые ресурсы.

Важно понимать, что DevTools предназначен не только для программистов.

Инструменты активно используют:

• веб-разработчики;
• frontend-разработчики;
• QA-инженеры;
• тестировщики;
• специалисты по технической поддержке;
• SEO-специалисты;
• специалисты по производительности сайтов.

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

Как открыть DevTools в Chrome

Есть несколько способов открыть инструменты разработчика.

Способ 1. Через контекстное меню

Откройте нужный сайт, нажмите правой кнопкой мыши на любой элемент страницы и выберите «Просмотреть код» / Inspect.

Chrome откроет DevTools и автоматически выберет соответствующий HTML-элемент.

Способ 2. С помощью клавиатуры

На Windows и Linux:

Ctrl + Shift + I — открыть DevTools.

Ctrl + Shift + C — открыть инструмент выбора элемента на странице.

Ctrl + Shift + J — открыть Console.

На macOS используются соответствующие сочетания с клавишей Command.

Для начала работы достаточно запомнить хотя бы Ctrl + Shift + I и Ctrl + Shift + C.

Какие вкладки есть в Chrome DevTools

Интерфейс DevTools содержит большое количество инструментов. Набор панелей может немного отличаться в зависимости от версии Chrome и настроек.

Среди наиболее важных:

• Elements;
• Console;
• Sources;
• Network;
• Performance;
• Application;
• Memory;
• Lighthouse;
• Recorder.

Для начинающих разработчиков и тестировщиков особенно важно хорошо разобраться в первых четырех.

Elements — работа с HTML и CSS

Вкладка Elements позволяет посмотреть структуру страницы и стили элементов.

Именно здесь можно увидеть DOM — структуру HTML-документа, которую браузер построил для текущей страницы. Также в этой панели можно изучать и временно изменять CSS-правила.

Например, на странице есть кнопка:

В Elements можно найти эту кнопку и посмотреть:

• HTML-код;
• класс;
• атрибуты;
• применяемые CSS-правила;
• размеры;
• отступы;
• шрифт;
• цвет;
• положение элемента.

Как изменить страницу через DevTools

Одно из самых интересных свойств DevTools — возможность временно изменять страницу прямо в браузере.

Например, можно изменить:

на:

И сразу увидеть результат.

Можно менять:

• цвет текста;
• размер шрифта;
• фон;
• ширину;
• высоту;
• отступы;
• границы;
• положение элементов.

Это особенно удобно при разработке дизайна.

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

Что такое DOM

При работе с Elements часто встречается понятие DOM — Document Object Model.

Проще говоря, DOM — это представление HTML-документа в виде структуры объектов, с которой может работать JavaScript.

Например:

Браузер преобразует эту структуру в дерево элементов.

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

Для тестировщика понимание DOM особенно важно при автоматизации тестов, поскольку автоматизированные инструменты часто находят элементы именно по их HTML-структуре, атрибутам, CSS-селекторам или другим признакам.

Как проверить CSS-стили элемента

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

С помощью DevTools можно выбрать ее и посмотреть, какие CSS-правила применяются.

В панели Styles можно увидеть:

• активные стили;
• переопределенные правила;
• неактивные свойства;
• источник CSS;
• значения отдельных параметров.

Это позволяет быстро понять, почему элемент выглядит не так, как задумано.

Например, если кнопка должна быть зеленой, но остается серой, можно проверить, какое CSS-правило задает цвет и не переопределяется ли оно другим стилем.

Box Model: почему элемент имеет неправильный размер

Еще одна полезная возможность Elements — просмотр Box Model.

Модель блока помогает понять, из чего складывается размер элемента:

• Content — содержимое;
• Padding — внутренний отступ;
• Border — граница;
• Margin — внешний отступ.

Например, элемент может выглядеть слишком большим не из-за неправильной ширины, а из-за большого padding.

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

Console — поиск ошибок JavaScript

Console — одна из самых важных вкладок DevTools.

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

Например:

выведет сообщение в консоль.

Если на сайте произошла JavaScript-ошибка, в Console можно увидеть соответствующее сообщение.

Например:

Для тестировщика такая информация может быть очень полезной при составлении баг-репорта.

Вместо:

«Кнопка не работает»

можно предоставить разработчику более конкретную информацию:

«При нажатии на кнопку возникает JavaScript-ошибка в Console».

Это значительно ускоряет поиск причины проблемы.

Как использовать Console для проверки JavaScript

В Console можно выполнять JavaScript-команды.

Например:

Браузер вернет:

Можно обращаться к элементам страницы:

и получать информацию о найденном элементе.

Это позволяет быстро проверять гипотезы и исследовать поведение страницы.

Network — одна из самых важных вкладок для QA

Для тестировщика вкладка Network является одной из ключевых.

Она показывает сетевую активность страницы: какие запросы отправляет браузер, какие ресурсы загружаются и какие ответы приходят от сервера. Chrome DevTools позволяет анализировать запросы и ответы, а также фильтровать сетевую активность.

С помощью Network можно проверить:

• HTTP-запросы;
• HTTP-методы;
• статус-коды;
• заголовки;
• параметры;
• тело запроса;
• ответ сервера;
• время выполнения запроса;
• загружаемые файлы.

Как найти запрос в Network

Откройте DevTools → Network.

После этого обновите страницу.

В списке появится большое количество запросов.

Например:

Чтобы найти нужный запрос, можно использовать фильтры.

Например, если необходимо проверить API-запрос, можно обратить внимание на категории Fetch/XHR.

HTTP-коды и DevTools

Network особенно полезен для проверки HTTP-статусов.

Например:

200 — запрос выполнен успешно.

201 — ресурс создан.

301/302 — перенаправление.

400 — некорректный запрос.

401 — требуется авторизация.

403 — доступ запрещен.

404 — ресурс не найден.

500 — внутренняя ошибка сервера.

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

Headers: что отправляется между браузером и сервером

В информации о сетевом запросе можно посмотреть Headers.

Здесь находятся различные заголовки запроса и ответа.

Например:

• URL;
• HTTP-метод;
• статус;
• тип контента;
• cookies;
• параметры кэширования;
• информация о браузере;
• заголовки безопасности.

Для QA-инженера это помогает понять, что именно происходит во время взаимодействия клиента с сервером.

Payload: что отправляет пользователь

Если на сайте есть форма регистрации, например:

Имя: Анна

Email: anna@example.com

после отправки данные могут уйти на сервер.

В Network можно открыть соответствующий запрос и посмотреть его содержимое в разделе Payload, если оно доступно для данного типа запроса.

Это полезно при тестировании:

• регистрации;
• авторизации;
• поиска;
• фильтров;
• оформления заказов;
• отправки форм.

Response: что вернул сервер

В разделе Response можно посмотреть ответ сервера.

Например, API может вернуть JSON:

Если интерфейс сайта показывает неправильную информацию, анализ Response помогает понять, проблема находится на стороне frontend или данные уже некорректны на уровне ответа сервера.

Как проверить скорость загрузки сайта

DevTools позволяет анализировать производительность веб-страницы.

Вкладка Performance помогает записать и исследовать процесс работы страницы, а отдельные инструменты Chrome позволяют анализировать загрузку и выполнение кода.

Можно исследовать:

• загрузку страницы;
• выполнение JavaScript;
• работу браузера;
• отрисовку;
• задержки;
• нагрузку на CPU.

Это особенно важно для сайтов с большим количеством интерактивных элементов.

Проверка сайта на мобильных устройствах

Еще одна важная функция DevTools — Device Mode.

Она позволяет приблизительно имитировать отображение сайта на разных размерах экранов.

Это удобно для проверки:

• мобильной версии;
• планшетов;
• адаптивной верстки;
• размеров кнопок;
• меню;
• изображений;
• расположения элементов.

Для запуска режима можно использовать кнопку Toggle device toolbar в DevTools.

При этом важно помнить: эмуляция браузера не заменяет полноценное тестирование на реальных устройствах.

Как тестировать адаптивность сайта

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

Открываем DevTools → Device Mode.

После этого можно менять ширину viewport и проверять, как ведет себя страница.

Особенно важно проверять:

• меню;
• формы;
• кнопки;
• таблицы;
• изображения;
• карточки товаров;
• текст;
• горизонтальную прокрутку.

Такие проверки помогают находить ошибки адаптивной верстки.

Application — cookies, storage и данные сайта

Вкладка Application используется для анализа различных данных веб-приложения, включая storage, cache, service workers и другие механизмы браузера.

Здесь можно работать с:

• Cookies;
• Local Storage;
• Session Storage;
• IndexedDB;
• Cache Storage;
• Service Workers.

Для тестировщика это особенно актуально при проверке авторизации и хранения пользовательских данных.

Cookies и тестирование

Cookies часто используются для хранения информации о сессии пользователя.

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

В DevTools можно посмотреть:

• название cookie;
• значение;
• домен;
• срок действия;
• параметры безопасности.

Это помогает тестировать различные сценарии работы авторизации.

Local Storage

Local Storage позволяет веб-приложению сохранять данные в браузере.

Например, сайт может хранить там:

• настройки пользователя;
• выбранную тему;
• некоторые параметры интерфейса;
• данные состояния приложения.

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

Sources — поиск и отладка кода

Панель Sources предназначена для работы с загруженными ресурсами, JavaScript и отладки кода.

В ней можно просматривать файлы, ставить breakpoint, выполнять отладку JavaScript, создавать snippets и работать с Workspace.

Особенно полезны breakpoints.

Они позволяют остановить выполнение JavaScript в определенном месте и посмотреть, что происходит с кодом.

Для начинающего тестировщика это может быть полезно при изучении причин JavaScript-ошибок.

Как искать нужный код

Если проект большой, вручную искать нужный файл бывает неудобно.

В DevTools есть поиск по загруженным ресурсам. Можно искать:

• текст;
• функции;
• CSS-классы;
• переменные;
• URL;
• фрагменты кода.

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

Lighthouse и проверка качества сайта

DevTools также связан с инструментами анализа качества веб-страниц, включая Lighthouse.

Lighthouse помогает оценивать различные характеристики сайта, в том числе:

• производительность;
• доступность;
• SEO;
• лучшие практики.

Это позволяет получить дополнительные рекомендации по улучшению веб-страницы.

Recorder: запись пользовательских действий

В современных версиях Chrome DevTools есть инструмент Recorder, который позволяет записывать и воспроизводить пользовательские сценарии.

Например:

1. Открыть сайт.
2. Перейти в каталог.
3. Найти товар.
4. Открыть карточку.
5. Добавить товар в корзину.

Такой сценарий можно записать и затем использовать для повторной проверки пользовательского пути.

Для тестирования веб-приложений это особенно интересная возможность.

Практический пример: как найти причину неработающей кнопки

Представим ситуацию:

Пользователь нажимает кнопку «Отправить», но форма не отправляется.

Что можно сделать?

Шаг 1. Открыть Console

Проверяем, нет ли JavaScript-ошибок.

Шаг 2. Открыть Network

Нажимаем кнопку и смотрим, появляется ли сетевой запрос.

Шаг 3. Если запрос появился

Проверяем:

• URL;
• метод;
• статус;
• Payload;
• Response.

Шаг 4. Если запроса нет

Можно проверить HTML-элемент и JavaScript-обработчик в Elements и Sources.

Таким образом, DevTools помогает перейти от простой жалобы «не работает» к конкретному пониманию проблемы.

Как DevTools помогает тестировщику

QA-инженер тестирует не только внешний вид сайта.

Ему необходимо понимать, как приложение работает внутри.

DevTools помогает:

• находить JavaScript-ошибки;
• проверять HTTP-запросы;
• анализировать ответы сервера;
• проверять cookies;
• исследовать Local Storage;
• тестировать адаптивность;
• находить проблемы загрузки;
• анализировать работу интерфейса;
• собирать техническую информацию для баг-репортов.

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

Какие инструменты DevTools стоит изучить начинающему QA

Если вы только начинаете изучать тестирование ПО, не обязательно сразу разбираться во всех возможностях Chrome DevTools.

Для начала достаточно освоить:

1. Elements

Чтобы понимать HTML и CSS.

2. Console

Чтобы находить JavaScript-ошибки.

3. Network

Чтобы анализировать запросы и ответы.

4. Application

Чтобы работать с Cookies и Storage.

5. Device Mode

Чтобы проверять адаптивность.

6. Sources

Чтобы понимать, как работает JavaScript и базовая отладка.

После освоения этих инструментов можно переходить к Performance, Lighthouse, Recorder и другим возможностям.

Полезные горячие клавиши Chrome DevTools

Несколько сочетаний клавиш значительно ускоряют работу.

Ctrl + Shift + I — открыть DevTools.

Ctrl + Shift + C — выбрать элемент на странице.

Ctrl + Shift + J — открыть Console.

Ctrl + F — поиск в текущем инструменте.

Также в DevTools есть Command Menu, с помощью которого можно быстро находить различные команды и панели.

Частые ошибки начинающих при работе с DevTools

Ошибка №1. Изучать все вкладки сразу

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

Ошибка №2. Не обновлять страницу после открытия Network

Если запросы появились до начала записи, часть информации можно пропустить.

Ошибка №3. Смотреть только на внешний вид

Иногда интерфейс выглядит нормально, но сервер возвращает ошибку.

Ошибка №4. Не проверять Console

JavaScript-ошибки могут объяснить причину некорректного поведения страницы.

Ошибка №5. Считать DevTools полноценной заменой реальному устройству

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

DevTools и автоматизированное тестирование

Chrome DevTools особенно полезен при изучении автоматизации тестирования.

Например, при работе с инструментами автоматизации тестировщик может использовать DevTools для:

• поиска элементов;
• анализа DOM;
• проверки селекторов;
• изучения сетевых запросов;
• анализа ошибок JavaScript;
• понимания поведения веб-приложения.

Поэтому знания DevTools становятся хорошей базой для дальнейшего изучения таких инструментов, как Selenium и Playwright.

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

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

С помощью DevTools можно:

• исследовать HTML и CSS;
• находить ошибки JavaScript;
• анализировать HTTP-запросы;
• проверять API;
• изучать Cookies и Storage;
• тестировать адаптивность;
• анализировать производительность;
• отлаживать JavaScript;
• проверять пользовательские сценарии.

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

Изучайте Тестирование ПО в IT ШАГ

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

На курсах по тестированию в IT ШАГ студенты изучают не только теорию QA, но и работают с практическими инструментами, которые используются при тестировании современных веб-приложений.

В процессе обучения можно познакомиться с:

• ручным тестированием;
• автоматизированным тестированием;
• Chrome DevTools;
• тестированием веб-приложений;
• составлением баг-репортов;
• API-тестированием;
• основами работы с Selenium и Playwright;
• современными подходами к обеспечению качества ПО.

Практические навыки помогают лучше понять профессию QA-инженера и подготовиться к работе с реальными IT-продуктами.