Курс «Режим разработчика для интернет-маркетолога», урок 1 из 5

Смотрим на сайт глазами разработчика

В каждый браузер встроен режим разработчика — DevTools, или «панель на F12». Программисты чинят в нём сайты. А маркетологу он помогает проверять лендинги перед запуском рекламы, показывать клиенту правки без верстальщика и выяснять, почему не идут заявки.

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

Зачем маркетологу режим разработчика

Не нужно уметь программировать, чтобы пользоваться DevTools. Достаточно знать, где что лежит и какие кнопки нажимать. Вот задачи, которые с ним решаются за минуты:

Проверить лендинг перед запуском рекламы: видна ли кнопка на телефоне, кликабелен ли номер, работает ли форма.
Показать клиенту новый оффер, цену или цвет кнопки прямо на живом сайте, а не в отдельном макете.
Сделать SEO-проверку страницы без платных сервисов (урок 2).
Разобраться, почему не срабатывают цели в Метрике или пропадают UTM-метки (урок 3).
Найти, что тормозит сайт и съедает конверсию с мобильной рекламы (урок 4).
Посмотреть, какие счётчики, виджеты и сервисы стоят у конкурентов (урок 5).

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

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

Какой браузер подойдёт. Google Chrome, Яндекс Браузер, Microsoft Edge, Opera построены на одном движке, и DevTools у них почти одинаковый. Все примеры в курсе показаны на Chrome. В Firefox и Safari инструменты похожие, но кнопки называются иначе. В Safari режим разработчика сначала нужно включить в настройках: «Дополнения» → «Показывать функции для веб-разработчиков».

Как открыть DevTools

Есть три способа. Запомните хотя бы первые два.

Правая кнопка мыши по элементу → «Просмотреть код». В Яндекс Браузере пункт называется «Исследовать элемент». Самый полезный способ: DevTools откроется и сразу покажет код того, по чему вы кликнули.
Горячие клавиши: F12 или Ctrl+Shift+I. На Mac — Cmd+Option+I. На некоторых ноутбуках F12 срабатывает только вместе с клавишей Fn.
Через меню: ⋮ в правом верхнем углу → «Дополнительные инструменты» → «Инструменты разработчика».

Тренажёр 1. Открываем DevTools и осваиваемся

Перед вами окно браузера с лендингом клининговой компании. Он будет с нами весь урок. Выполняйте задания по порядку.

Какие вкладки нужны маркетологу

Вкладок в DevTools много, но маркетологу хватит пяти. Остальные — инструменты программистов. Если интерфейс у вас на русском, вкладки называются «Элементы», «Консоль», «Сеть» и «Приложение», Lighthouse остаётся без перевода.

Вкладка	Что там	Урок
Elements	Код и оформление страницы: заголовки, тексты, ссылки, кнопки	1, 2
Console	Сообщения и ошибки сайта, проверка целей Метрики	1, 3
Network	Всё, что загружает страница: картинки, скрипты, счётчики	3, 4
Application	Куки и хранилище браузера: UTM-метки, идентификаторы Метрики	3
Lighthouse	Автоматический аудит скорости и базового SEO	4

Вкладка Elements: читаем код страницы

Любая страница состоит из элементов: заголовков, абзацев, картинок, кнопок, форм. Во вкладке Elements каждый элемент записан строчкой кода. Выглядит пугающе только первые пять минут. Разберём одну строку — ссылку с телефоном из шапки нашего лендинга.

Кликайте по частям строки, чтобы узнать, что каждая из них значит.

Начните с первой части, <a.

Элементы вкладываются друг в друга, как матрёшки: форма содержит поле и кнопку, шапка — логотип и телефон. Поэтому код во вкладке Elements показан деревом. Вложенные элементы сдвинуты вправо, а треугольник слева от строки сворачивает и разворачивает блок.

Найти нужный элемент можно двумя способами:

Инструмент выбора — значок со стрелкой в левом верхнем углу DevTools, или Ctrl+Shift+C. Включаете его, водите мышью по странице, и DevTools подсвечивает элементы. Кликнули — в дереве выделилась нужная строка.
Через дерево — наводите мышь на строку кода, и на странице подсвечивается соответствующий элемент.

Подсказка над подсвеченным элементом показывает его тег, класс и размер в пикселях. Размер пригодится, когда дизайнер спросит, какого формата нужна картинка для баннера на сайте.

Тренажёр 2. Находим элементы на странице

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

Правим страницу на лету

Тексты и оформление в DevTools можно менять прямо на открытой странице. Зачем это маркетологу:

Показать клиенту новый оффер на живом сайте. Такой вариант согласовывают быстрее, чем абстрактный макет.
Проверить, влезет ли длинный заголовок из объявления в первый экран лендинга.
Подготовить скриншоты вариантов для A/B-теста: другой цвет кнопки, другая цена, другой текст призыва.
Скрыть личные данные клиента или чужие цифры перед скриншотом для кейса или презентации.

Как править текст. Найдите элемент в дереве и дважды кликните по его тексту. Текст станет редактируемым: впишите своё и нажмите Enter.

Как править оформление. Справа от дерева находится панель Styles. В ней записаны правила оформления выбранного элемента — CSS. Для начала хватит четырёх свойств: color — цвет текста, background — цвет фона, font-size — размер шрифта, border-radius — скругление углов. Кликните по значению, впишите новое и нажмите Enter. Для цвета удобнее кликнуть по цветному квадратику — откроется палитра.

Обратите внимание на строку с точкой, например .s-btn {. Это правило для класса, и оно действует на все элементы с этим классом. Поменяете цвет в нём — перекрасятся сразу все кнопки на странице.

Тренажёр 3. Меняем оффер, цену и цвет кнопок

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

Лайфхак: превращаем страницу в текстовый редактор

Если править нужно много текста, искать каждую строку в дереве долго. Есть команда, после которой по странице можно просто кликать и печатать, как в Word. Откройте вкладку Console, вставьте строку и нажмите Enter:

document.designMode = "on"

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

При первой вставке текста в консоль Chrome покажет предупреждение и попросит вручную ввести фразу-подтверждение, например allow pasting. Это защита от мошенников. Правило простое: никогда не вставляйте в консоль код, смысла которого не понимаете, особенно если его прислал незнакомый человек «чтобы получить бонус» или «чтобы починить аккаунт».

Тренажёр 4. Режим редактирования через консоль

Консоль выглядит как место для программистов, но здесь вам понадобится всего одна команда.

Мобильная версия: режим устройства

В рекламных сетях Яндекса и VK Рекламе большая часть кликов часто приходит со смартфонов. А лендинг обычно собирают и проверяют на компьютере. Режим устройства (Device Toolbar) показывает страницу так, как её увидит человек с телефона.

Как включить. Откройте DevTools и нажмите на значок с телефоном и планшетом слева от вкладки Elements, или Ctrl+Shift+M (на Mac — Cmd+Shift+M). Над страницей появится панель: список устройств (Dimensions), ширина и высота экрана, масштаб и кнопка поворота. После включения обновите страницу: некоторые сайты определяют, что открыты с телефона, только при загрузке.

Что проверять на мобильном:

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

Тренажёр 5. Ищем ошибку в мобильной версии

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

Режим устройства — это эмуляция. Он меняет размер экрана, но не превращает Chrome в Safari на iPhone. Шрифты, поведение форм и некоторые ошибки на настоящем телефоне будут другими. Перед запуском рекламы обязательно откройте лендинг на реальном смартфоне, хотя бы на своём.

Скриншоты без сторонних программ

В DevTools есть меню команд: Ctrl+Shift+P (на Mac — Cmd+Shift+P). Начните вводить screenshot (в русском интерфейсе — «скриншот»), и появятся четыре команды:

Capture full size screenshot — вся страница целиком. Даже длинный лендинг сохранится одной картинкой.
Capture node screenshot — только элемент, выбранный во вкладке Elements. Например, блок с ценами или форма.
Capture area screenshot — область, которую вы выделите мышью.
Capture screenshot — видимая часть экрана.

Комбинируйте с режимом устройства: выберите iPhone, затем Capture full size screenshot — получите длинный скриншот мобильной версии для аудита или отчёта.

Шпаргалка

Действие	Windows	Mac
Открыть DevTools	`F12` или `Ctrl`+`Shift`+`I`	`Cmd`+`Option`+`I`
Открыть сразу консоль	`Ctrl`+`Shift`+`J`	`Cmd`+`Option`+`J`
Выбрать элемент на странице	`Ctrl`+`Shift`+`C`	`Cmd`+`Shift`+`C`
Режим устройства	`Ctrl`+`Shift`+`M`	`Cmd`+`Shift`+`M`
Меню команд, скриншоты	`Ctrl`+`Shift`+`P`	`Cmd`+`Shift`+`P`
Исходный код страницы	`Ctrl`+`U`	`Cmd`+`Option`+`U`

Правки в DevTools живут до обновления страницы. Если что-то пошло не так, нажмите F5, и всё вернётся как было.

Домашнее задание

Возьмите свой лендинг или страницу клиента и пройдите по шагам:

Найдите главный заголовок h1. Понятно ли из него, что здесь предлагают?
Проверьте телефон в шапке: есть ли у ссылки href="tel:…".
Посмотрите страницу в режиме устройства на iPhone SE и Samsung Galaxy S8+, самых узких экранах из списка. Видны ли кнопки и формы целиком?
Замените заголовок на новый вариант оффера и сделайте длинный скриншот мобильной версии через Capture full size screenshot.

Следующий урок

Экспресс SEO-аудит в DevTools

За пять минут проверяем title, description, canonical, заголовки H1–H6 и микроразметку, а также смотрим, как ссылка на страницу будет выглядеть в Telegram и VK. Без сторонних сервисов.

Перейти ко второму уроку