Мы уже разобрали анатомию страницы (HTML) и её визуальное оформление (CSS) (1, 2, 3). Но как увидеть это всё вживую? Как понять, почему кнопка на сайте съехала на два пикселя ниже, чем задумывалось в макете?

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

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

Как открыть инструменты разработчика

Это можно сделать несколькими способами:

1. Кликните правой кнопкой мыши по любому элементу на странице и выберите «Просмотреть код» (Inspect) или «Исследовать элемент»

2. Используйте горячие клавиши: Ctrl + Shift + I (для Windows и Linux) или Cmd + Option + I (для Mac)

3. В меню браузера найдите раздел «Дополнительные инструменты» → «Инструменты разработчика»

Перед вами откроется панель, обычно расположенная в нижней или правой части экрана. Нас интересует вкладка «Elements» (Элементы).

Панель Elements: HTML и CSS в действии

Эта панель — ваш главный помощник. Она состоит из двух основных частей:

1. Дерево DOM (HTML)

Слева вверху вы видите HTML-код открытой страницы. Он выглядит точно так же, как структура тегов, о которой мы говорили во второй части. Вы можете сворачивать и разворачивать блоки (<header>, <nav>, <section>), чтобы понять иерархию.

Самое главное: при наведении курсора на строку кода в панели Elements, соответствующий элемент на самой странице подсвечивается. И наоборот: если навести курсор на элемент на странице, подсветится его код. Это идеальный способ найти нужный блок в сложном макете.

2. Стили (CSS)

Справа внизу расположена панель стилей. Здесь отображаются все CSS-правила, применённые к выбранному элементу. Самое интересное здесь — возможность редактировать код в реальном времени. Двойной клик по значению любого свойства (например, color или font-size) позволит вам ввести новое значение и мгновенно увидеть результат на экране. Изменения не сохраняются после перезагрузки страницы, но они дают полное представление о том, как работает тот или иной стиль.

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

Кликнув на неё, вы перейдёте в режим инспектора. Наведите курсор на элемент страницы, чтобы увидеть его стили. Кликните на элемент в панели разработчика, чтобы выделить нужную строчку в коде.

Давайте подробнее изучим, что можно увидеть:

При наведении (hover) на элемент мы можем увидеть стили его шрифта, цвет и отступы.

При клике на элемент можно посмотреть все его CSS-стили, а также наследуемые стили и псевдоэлементы.

Наследуемые стили — это стили, которые были заданы родительским блокам. Псевдоэлементы — это элементы, которых физически нет на странице (они отсутствуют в HTML-разметке), но нужны для стилизации.

На что ещё обратить внимание дизайнеру

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

• Computed: показывает итоговые («вычисленные») значения всех свойств для выбранного элемента. Это очень полезно, чтобы понять реальный размер элемента с учётом всех отступов, рамок и контента.

• Layout: визуально демонстрирует блочную модель элемента (Box Model). Здесь наглядно видно, где заканчивается контент, начинаются внутренние отступы (padding), затем граница (border) и внешние отступы (margin). Идеальный способ проверить, нет ли лишних отступов, ломающих сетку.

• Assets: позволяет посмотреть список всех загруженных изображений, шрифтов и иконок. Если картинка в макете выглядит размыто, здесь можно проверить её реальное разрешение.

• Network: показывает скорость загрузки всех ресурсов страницы. Помогает понять, насколько «тяжёл» ваш дизайн.

Зачем это нужно дизайнеру

1. Самопроверка. Перед сдачей макета откройте похожий сайт и попробуйте воссоздать его структуру в уме, используя DevTools. Это поможет вам избежать классических ошибок, таких как неправильные отступы или нелогичная вложенность.

2. Анализ конкурентов. Хотите узнать, какой шрифт или оттенок синего использует успешный сервис? Открываете DevTools — и вся информация перед вами.

3. Точная постановка задач. Вместо фразы «сделай кнопку побольше», вы сможете сказать: «Увеличьте font-size у .btn-primaryдо 18px и добавьте padding-top 10px».

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

? Telegram-канал Домклик Дизайн
https://t.me/domclickdesign