Дизайнеру часто хочется посмотреть, как будет выглядеть страница, если немного увеличить кегль и отступ заголовка, поменять шрифт, цвет фона и радиус скругления кнопки. Если страница уже свёрстана, то проще всего это сделать в браузере с помощью веб‑инспектора: встроенного набора инструментов для разработчиков.

В каждом браузере свой набор инструментов. Обычно открыть его можно с помощью сочетания Command+Shift+I на Маке и Control+Shift+I или F12 в других ОС.

Первая вкладка любого веб‑инспектора — Элементы. На ней расположены основные инструменты для просмотра и редактирования открытой страницы. Обычно эта вкладка разделена на две части: слева разметка страницы, справа стили выделенного элемента.

Сафари
Хром
Фаерфокс

Мы посмотрим, как работать со страницей на примере веб‑инспектора в Хроме. В других браузерах есть отличия в деталях, но общий подход такой же.

Редактирование разметки

Для того, чтобы выбрать элемент для инспектирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать»:

В других браузерах пункт меню может называться «Проверить элемент»

Отредактируем текст в выбранном элементе:

Для перехода в режим редактирования, нужно кликнуть на текст дважды. Чтобы сохранить изменения — нажать «ввод»

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

Заменим изображение:

Таким образом можно отредактировать любой атрибут

Включим отключенную форму:

Элементы на странице можно скрыть на время или удалить:

Удалить элемент можно также клавишами Delete или Backspace

Или менять местами перетаскиванием:

Редактирование стилей

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

Поправим внешний вид заголовка:

Цифровые значения можно изменять стрелками «вверх»/«вниз». Если при этом ещё зажать Контрол, то значения будут меняться десятками, если зажать Альт — десятыми долями

Поменяем регистр заголовка, добавив новое свойство:

Браузер знает названия многих свойств и их значений и предлагает варианты в выпадающем списке

Отключим цвет заголовка:

Посмотрим, как выглядит кнопка при наведении или в активном состоянии:

:hover — состояние элемента при наведении, :active — при нажатии, :focus — в фокусе, :visited — состояние посещённой ссылки

Тестирование адаптивности

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

Посмотрим, как выглядит страница проектов бюро на Айфоне:

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

Что дальше

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы