Привет! Я Дима — дизайнер в Voximplant, занимаюсь нашим сайтом. В работе я часто использую инструменты разработчика — и не только в задачах связанных с сайтом, поэтому решил подготовить краткое руководство по его использованию для дизайнеров.

Что это вообще такое...

DevTools — это набор инструментов разработчика, которые встроены в большинство браузеров, если не во все. С их помощью можно смотреть HTML-разметку страницы и CSS-правила элементов, отлаживать JavaScript и анализировать сетевые запросы. В основном их используют веб‑разработчики и тестировщики, но они также могут быть полезны дизайнерам.

Наверняка у многих из нас было такое: случайно нажимаешь F12, и на пол экрана открывается окно с кучей кода и панелей. Первое ощущение — растерянность. Что это, куда смотреть? Хочется как можно скорее закрыть и забыть.

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

С DevTools то же самое. Не нужно знать все кнопки и вкладки. Главное освоить несколько инструментов, которые могут помочь вам в работе. Начнём.

Из чего состоит окно DevTools

Когда вы впервые открываете DevTools всё может показаться хаотичным. На самом деле он разделён на несколько основных зон. Разобравшись с ними, вам будет проще исследовать возможности этого инструмента.

1. Панель с вкладками
   
   Здесь находятся основные панели инструмента разработчика: Elements, Console, Sources, Network, Performance, Application и другие. Для дизайнеров чаще всего нужны вкладки Elements и Style, реже — Network.

   

2. Режим инспекции элементов
   
   Иконка курсора в квадрате. С его помощью можно кликнуть по любому элементу на странице и сразу увидеть его HTML‑разметку и примененные CSS‑стили.

   

3. Переключение в адаптивный вид (Toggle Device Toolbar)
   
   Иконка девайсов. Позволяет включить Responsive mode и проверить как страница выглядит на разных устройствах и экранах.

   

4. Область с HTML‑разметкой
   
   Она не только отображает структуру страницы, но и обеспечивает двустороннюю связь HTML-разметки и окна просмотра. При наведении на любой элемент в разметке он автоматически подсвечивается на странице.

   

5. Область со стилями
   
   Вкладка Styles показывает все примененные к элементу CSS‑правила, которые можно тут же редактировать. А вкладка Computed отображает финальные значения: точные размеры, отступы, шрифты и цвета элемента.

   

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

Инспекция элементов

Инспектор элементов — это самая базовая и полезная функция DevTools. С её помощью можно выбрать любой элемент на странице и посмотреть его параметры: точные размеры, внутренние и внешние отступы (padding и margin), а также применённый шрифт и цвет.

Как включить

1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Opt+I на Mac)

2. Нажмите на кнопку инструмента в левом верхнем углу панели (стрелка в квадрате)

3. Нажмите на любой элемент на странице — он подсветится, а в окне DevTools отобразится информация о нём

Вкладки Styles и Computed

Дизайнеру особенно полезна вкладка Computed, где отображаются все итоговые параметры элемента, которые уже вычислил браузер. В ней можно увидеть размеры блока, его внутренние и внешние отступы, используемый шрифт и его характеристики, а также цвет текста и фона. Еще в ней можно увидеть унаследованные свойства, если у элемента нет собственных значений, например шрифт или цвет текста, полученные от родительского блока. Если в Style указано font‑size 1em, в Computed же будет показано реальное значение, например 16px.

Вкладка Styles показывает исходные CSS‑правила. В ней можно проследить, из какого файла пришло каждое свойство, какие правила действуют одновременно и что в итоге переопределяет другое. На ней виден весь набор правил, влияющих на элемент.

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

Padding и Margins. Внутреннее и внешние отступы

При наведении на элемент DevTools подсвечивает его отступы цветом: зелёный обозначает padding, оранжевый — margin.

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

Margin — внешний отступ, который отделяет элемент от других. С его помощью регулируют расстояние между карточками, кнопками или секциями.

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

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

Проверка адаптивности

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

Для этого в DevTools есть Responsive Design Mode. Он позволяет переключать страницу в мобильный вид и проверить, как вёрстка адаптируется под разные размеры экранов.

Как включить

1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Opt+I на Mac)

2. Нажмите на иконку телефона и планшета рядом с кнопкой выбора элемента — это Toggle Device Toolbar

После этого страница переключится в адаптивный режим. Сверху появится панель, где можно выбрать устройство (например, iPhone, iPad, Pixel) или задать свои размеры вручную.

Что можно проверить дизайнеру

• Как перестраиваются блоки при изменении ширины (не накладываются ли элементы друг на друга на узких экранах)

• Размеры текста и кнопок — удобно ли читать и нажимать на мобильном

• Поведение изображений — не обрезаются ли они или не становятся слишком мелкими

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

Быстрая проверка идей прямо в браузере

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

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

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

Как это сделать

1. Выберите элемент через инспектор

2. В панели во вкладке Styles найдите нужное CSS‑свойство

3. Измените его значение и сразу увидите результат на странице

Пример того, что еще можно сделать

• Увеличить или уменьшить padding

• Протестировать другой размер или начертание шрифта

• Отключить отдельные свойства (снять галочку) и посмотреть, как выглядит блок без них

Работа с медиа-файлами

Часто в работе нужно быстро достать материалы с сайта: логотип в SVG или изображение. Но не всегда их можно скачать напрямую — логотип может быть встроен в код, а изображение не даётся через «Сохранить как…». В таких случаях мы тоже можем обратиться к DevTools и с его помощью сохранить логотип или картинку из кода сайта или через вкладку Network.

Как скачать SVG-логотип

1. Найдите логотип на странице и выберите его через инспектор

2. Если логотип встроен в разметку (тег <svg>), его содержимое появится во вкладке Elements

3. Кликните правой кнопкой мыши → Copy → Copy element, вставьте код в Figma, или текстовый редактор и сохраните как файс с расширением svg

Как скачать изображение, если оно защищено от скачивания через «Сохранить как…»

1. Перейдите во вкладку Network

2. В фильтре выберите Img и обновите страницу — появится список всех загруженных изображений

3. Найдите нужное изображение, кликните по нему правой кнопкой мыши → Save image as...

DevTools в дизайн-ревью и работе с разработчиками

DevTools очень полезен в совместной работе с командой разработки. Он становится универсальным языком: вместо абстрактных фраз вроде «кажется кнопка слишком близко к тексту» можно сразу показать точное значение отступа. Такой подход упрощает коммуникацию и делает фидбек конструктивным.

Для таких задач у нас есть шаблон в Figma Community. Он помогает систематизировать процесс дизайн ревью.

Подробнее о работе с ним читайте в нашем Telegram‑канале.

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

Заключение

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

Спасибо, что дочитали статью! Поддержите статью реакцией и поделитесь ей с коллегами, которым она будет полезна. А также подписывайтесь на наш Telegram‑канал — там мы делимся полезными материалами, рассказываем про процессы и публикуем кейсы из нашей работы.

Дизайн команда Вокса ?