Сегодня расскажу про один из любимых инструментов, про который я бы хотел узнать как можно раньше, когда попал в ИТ — DevTools (Developer Tools). Это встроенные в браузер (Yandex, Chrome, Firefox, Safari, Edge), инструменты, которые позволяют анализировать, тестировать и оптимизировать сайт/веб-приложение/сервис.
Я не разработчик, но эти инструменты помогают и мне быстрее решать проблемы, экономить время команды. Делюсь личными кейсами, как я использую DevTools в повседневной работе:
🎨 Вкладка "Elements"
Когда дизайнеры или разработчики спорят о том, как лучше сделать, можно создать «живой» прототип в DevTools:
— Убираю лишнее. Например, скрываю пункты меню или баннеры, чтобы показать, как будет выглядеть страница после оптимизации. Делаю скриншот — и у команды уже есть визуальная база для обсуждения.
— Дублирую элементы. Если нужно добавить новый блок, я копирую существующий, меняю текст и цвет — и сразу вижу, как это повлияет на макет.
— Сохраняю SVG. Иногда нужно передать иконку дизайнеру. Выделяю SVG-элемент в коде, копирую его и сохраняю как .svg-файл — готовый исходник без лишних запросов к команде.
Пример
На встрече спорили, куда поставить кнопку. За 5 минут отредактировал HTML, сделал скриншот и отправил всем — проблема решилась без долгих обсуждений.
💬 Вкладка "Console"
Одна из моих любимых. Тут можно увидеть логи веб-приложения, но чаще всего я использую её для взаимодействия с сайтом через js-скрипты. Введите
document.querySelector('h1').style.color = 'red' прямо в консоль — это изменит цвет заголовка.Если команда разработчиков работает над интеграцией с внешним API, я часто проверяю его работу самостоятельно. Например:
— Модифицирую запросы. Копирую fetch-запрос из кода, меняю параметры (например, лимит записей с 10 до 1000), чтобы получить все данные за один раз. Это помогает сразу увидеть, как API ведет себя при больших нагрузках или как выглядит ответ.
— Тестирую гипотезы. Если пользователи жалуются на неработающую кнопку, я запускаю функцию вручную через консоль, чтобы понять, где проблема — в интерфейсе или бэкенде.
— Смотрю логи ошибок, которые возникают при загрузке страницы (например, «Uncaught TypeError»).
Пример
Нужно было выгрузить много данных по каждой из категорий. Написал js-скрипт, который по АПИ вытащил категории, потом по каждой из категорий вытащил записи. В итоге получил полные данные сервиса, которые смог потом уже проанализировать в Excel.
🌐 Вкладка "Network"
Отображает все запросы, которые браузер делает при загрузке страницы: картинки, скрипты, стили, API-запросы и т.д. Здесь видно время загрузки, размер файлов, статус ответа сервера (успешно, ошибка и т.д.).
Тут я чаще всего:
— Смотрю АПИ-запросы, чтобы скопировать их и использовать на вкладке Console
— Смотрю что фронт отправил на бэк (request), и что бэк прислал на фронт (response)
— Используя фильтр Media скачиваю видео и аудио с сайтов 🏴☠️
Пример
Надо было получить список всех элементов меню. На вкладке Network нашел запрос, который получал данные для меню, скопировал response, сконвертировал в Excel и использовал при формировании ТЗ на разработку.
Остальные вкладки я использую редко, но если кратко вот их назначение:
— 🧠 Sources — скачиваю изображения, изучаю исходники и отлаживаю JS.
— ⚡️ Performance — тестирую производительность страницы.
— 🧠 Memory — отслеживаю утечки памяти.
— 📁 Application — управляю кэшем, куками.
DevTools — это не только для технарей, немного практики — и вы начнете видеть в них помощника, который упрощает жизнь в ИТ-проектах.
В этой статье на Хабре можно найти несколько классных лайфхаков, которые пригодятся не только в работе 😜.
🔗 См. также
Новичкам
— Intro Video от команды Chrome
— DevTools (Документация)
— Обзор SkillFactory
— Обзор HTML-academy
Бывалым
— Одно из многочисленных видео Никиты Дубко (devtools-евангелиста)
— Официальные советы Chrome DevTools
— DevToolsTips.org — подборка практических примеров.
— Can I dev tools? — интерактивный гайд, который покажет, как решать конкретные задачи через DevTools.
#devtools #tools #tips