{{title}}
{{text}}
{{published}}
Руководство по DevTools: базовый инструмент для тестирования веб-приложений
DevTools (инструменты разработчика) — один из основных инструментов при тестировании веб-приложений. С его помощью можно посмотреть, что происходит на странице за пределами видимого интерфейса: проверить верстку, запросы к серверу, ошибки в браузере и данные, которые приложение хранит локально. В этой статье разберем основные возможности DevTools и посмотрим, где они пригодятся в работе с веб-приложением.
Кому и зачем нужны DevTools
Чаще всего DevTools ассоциируют с разработкой, но на практике ими пользуются и другие участники команды. Для QA это прежде всего способ получить дополнительную информацию о найденной проблеме (баге): проверить элемент интерфейса, посмотреть запрос к API, увидеть ошибку в Console или проверить данные в браузере.
Разработчику эти же данные помогают быстрее найти причину ошибки, а product-менеджеру DevTools может быть полезен, например, при проверке поведения страницы на разных устройствах или анализе проблем с загрузкой.
Разработчику эти же данные помогают быстрее найти причину ошибки, а product-менеджеру DevTools может быть полезен, например, при проверке поведения страницы на разных устройствах или анализе проблем с загрузкой.
Как открыть DevTools
DevTools доступны в современных браузерах, включая Chrome, Edge, Firefox и Safari, и не требуют отдельной установки. Открыть их можно через правый клик → Inspect / Inspect Element или с помощью горячих клавиш F12 / Cmd + Option + I (macOS) / Ctrl + Shift + I (Windows).
В DevTools много инструментов, но для начала разберем те, которые чаще всего используются при тестировании и разработке веб-приложений.
В DevTools много инструментов, но для начала разберем те, которые чаще всего используются при тестировании и разработке веб-приложений.
Elements: проверка верстки и интерфейса
Во вкладке Elements можно посмотреть HTML-структуру страницы и стили конкретного элемента. Это удобно, когда нужно проверить размеры, отступы или расположение элемента, а также временно изменить CSS и посмотреть, как интерфейс будет выглядеть с другими значениями.
Elements: шрифты, размеры и цвета
В Styles и Computed можно проверить фактические параметры элемента: используемый шрифт, его размер, цвет, отступы и другие CSS-свойства. Это особенно удобно при сравнении реализованной страницы с дизайном или при проверке контрастности.
Это особенно важно при тестировании верстки, работе с дизайн-макетами и проверке веб-доступности.
Device Mode: проверка адаптивности
Для проверки того, как страница ведет себя на экранах разных размеров, в DevTools есть Device Mode. Переключиться в него можно через иконку Toggle device toolbar в верхней части DevTools.
В режиме Responsive можно вручную менять ширину и высоту viewport — видимой области страницы внутри браузера. Проще говоря, это пространство, в котором пользователь видит сайт на своем экране. Меняя размер viewport, можно посмотреть, как интерфейс перестраивается на телефоне, планшете или небольшом экране ноутбука.
В режиме Responsive можно вручную менять ширину и высоту viewport — видимой области страницы внутри браузера. Проще говоря, это пространство, в котором пользователь видит сайт на своем экране. Меняя размер viewport, можно посмотреть, как интерфейс перестраивается на телефоне, планшете или небольшом экране ноутбука.
Также можно выбрать готовое мобильное устройство, переключить portrait/landscape orientation и проверить, не появляются ли горизонтальный скролл, наложения элементов, проблемы с меню, текстом или кнопками.
При этом Device Mode не заменяет тестирование на реальном устройстве. Например, выбор iPhone в Chrome DevTools не означает проверку сайта в настоящем Safari на iPhone — браузер и особенности устройства эмулируются только частично. Поэтому важные сценарии желательно дополнительно проверять на реальных смартфонах и планшетах.
Network: анализ сетевых запросов
Во вкладке Network можно увидеть запросы, которые браузер отправляет во время работы с приложением. Для тестировщика особенно интересны Fetch/XHR-запросы: открыв конкретный запрос, можно посмотреть его URL, HTTP method, status code, отправленные данные и ответ сервера.
Например, пользователь нажимает Login, но авторизация не происходит. В Network можно найти запрос авторизации и проверить, что было отправлено на сервер и какой ответ вернулся. Если запрос завершился с ошибкой, эта информация помогает точнее понять проблему и оформить bug report.
Например, пользователь нажимает Login, но авторизация не происходит. В Network можно найти запрос авторизации и проверить, что было отправлено на сервер и какой ответ вернулся. Если запрос завершился с ошибкой, эта информация помогает точнее понять проблему и оформить bug report.
В Network также можно искусственно ограничить скорость соединения. Это полезно, например, чтобы проверить, что происходит при медленной загрузке: появляется ли loader, остается ли интерфейс рабочим и корректно ли обрабатывается длительный запрос.
Network часто дает больше информации о баге, чем то, что видно пользователю на экране.
Application: Cookies и Local Storage
Во вкладке Application можно посмотреть данные, которые приложение хранит в браузере, например cookies, Local Storage и Session Storage. Это пригодится при тестировании авторизации, пользовательских настроек и других сценариев, где состояние должно сохраняться между действиями.
Например, после logout можно проверить, удалились ли данные авторизации. Здесь же их можно вручную изменить или удалить и посмотреть, как после этого поведет себя приложение.
Например, после logout можно проверить, удалились ли данные авторизации. Здесь же их можно вручную изменить или удалить и посмотреть, как после этого поведет себя приложение.
Изменяя или удаляя данные в Local Storage, можно имитировать разные состояния приложения — например, сбросить сохраненные настройки, язык, тему или другие данные пользователя — и посмотреть, корректно ли приложение обрабатывает такие изменения.
Также можно проверить работу cookie: сохраняется ли согласие пользователя после нажатия Accept или Reject, какие cookies появляются после выбора и запрашивается ли согласие повторно после их удаления.
Console: ошибки и поведение приложения
Во вкладке Console можно увидеть ошибки и предупреждения, которые возникают во время работы страницы. Иногда интерфейс просто перестает реагировать или часть функциональности не работает, а в Console при этом уже есть ошибка, которая помогает понять, где искать причину.
QA не обязательно уметь исправлять JavaScript-код, чтобы пользоваться Console. Сообщение об ошибке можно приложить к bug report — для разработчика это может быть важной информацией при расследовании проблемы.
QA не обязательно уметь исправлять JavaScript-код, чтобы пользоваться Console. Сообщение об ошибке можно приложить к bug report — для разработчика это может быть важной информацией при расследовании проблемы.
Даже если пользователь не видит проблему визуально, ошибки в консоли часто указывают на реальные баги или потенциальные проблемы.
Lighthouse и базовая проверка accessibility
В Chrome DevTools также доступен Lighthouse — инструмент для автоматической проверки качества веб-страницы.
Для QA здесь особенно интересна проверка accessibility. Lighthouse может обнаружить некоторые проблемы с контрастностью, семантикой HTML и другими базовыми требованиями доступности. При этом автоматическая проверка не заменяет полноценное accessibility-тестирование, а помогает быстро найти часть распространенных проблем.
Для QA, разработчиков и product-менеджеров это удобный способ быстро оценить соответствие продукта базовым требованиям веб доступности. Доступность в настоящее время — это не рекомендация, а законодательное требование.
Accessibility становится всё более важной частью требований к цифровым продуктам. В частности, с 28 июня 2025 года European Accessibility Act устанавливает требования доступности для ряда продуктов и услуг в ЕС, включая e-commerce, банковские и платежные сервисы.
Заключение
DevTools стоит использовать практически при любом тестировании веб-приложения, когда нужно понять не только что сломалось, но и получить больше информации о возможной причине проблемы.
Если проблема связана с внешним видом страницы или адаптивностью, стоит начать с Elements и Device Mode. Если действие пользователя не выполняется, данные не загружаются или появляется ошибка после отправки формы — проверить Network. При неожиданном поведении страницы полезно дополнительно посмотреть Console.
Application пригодится при тестировании авторизации, сессий, cookies и сохраненных пользовательских настроек. А Lighthouse можно использовать как дополнительный инструмент при проверке performance и accessibility.
DevTools не заменяет функциональное тестирование, реальные мобильные устройства или полноценное API- и accessibility-тестирование. Это инструмент, который помогает тестировщику глубже исследовать проблему и собрать больше технической информации для bug report.
На курсе Manual QA мы разбираем DevTools на практических примерах и используем его вместе с функциональным тестированием, API, HTTP и оформлением bug reports. Часть таких проверок можно автоматизировать. Например, автотест может проверить, создается ли нужная cookie после авторизации, удаляется ли она после logout или сохраняется ли выбранная пользователем настройка в Local Storage.
На курсе Manual QA мы разбираем DevTools на практических примерах и используем его вместе с функциональным тестированием, API, HTTP и оформлением bug reports. Часть таких проверок можно автоматизировать. Например, автотест может проверить, создается ли нужная cookie после авторизации, удаляется ли она после logout или сохраняется ли выбранная пользователем настройка в Local Storage.
19.12.2025