Консоль разработчика (DevTools) — встроенный инструмент диагностики сайта. С его помощью можно проверить работу форм, целей в Яндекс Метрике, пикселей рекламных систем и других элементов. Вместе с Сергеем Паниным, руководителем отдела разработки Kadema Digital, расскажем, как открыть его в браузере и использовать для решения типовых маркетинговых задач.
Сервисы Callibri
Автоматизируем работу с лидами на всех этапах воронки
Помогаем понять, какая реклама приводит платящих клиентов
Делаем работу маркетинга прозрачной и эффективной
Зачем маркетологу уметь пользоваться консолью разработчика
Найти ошибки после обновления сайта. После редизайна, установки виджета или подключения платёжного сервиса могут перестать работать счётчики, пиксели, формы и сторонние скрипты. В консоли такие сбои отображаются как ошибки или предупреждения. Маркетолог видит их до запуска рекламы и не принимает решения на основе искажённых данных.
Проверить элементы, которые влияют на конверсию. Через DevTools получится узнать, срабатывают ли формы, кнопки, платёжные модули, счётчики и пиксели после действия пользователя. Например, человек отправляет заявку, а запрос к CRM не уходит или возвращает ошибку. Без такой проверки рекламная кампания продолжит вести трафик на страницу, где часть обращений теряется ещё до обработки менеджером.
Узнать скорость работы страницы. Во вкладке Network видно, из-за чего тормозит сайт: к примеру, из-за тяжёлого изображения или видео. Маркетолог может передать разработчику конкретную задачу — сжать файл или настроить ленивую загрузку. Это сократит время первого открытия и снизит риск ухода пользователя.
Например, вкладка Performance показывает, что у страницы повышен показатель CLS. Это значит, что некоторые блоки могут менять положение уже после того, как пользователь начал взаимодействовать со страницей. Если при сдвиге конверсионные элементы не видно — попросите разработчика зафиксировать их размеры.
Удостовериться, что данные корректно передаются в аналитику и рекламные системы. Во вкладке Network видны запросы, которые сайт отправляет после целевого действия. Если событие не появляется или возвращает ошибку, сведения не доходят. Без такой диагностики отчёты покажут неполную картину, а рекламные кампании продолжат обучаться на неверной статистике.
Маркетологу не нужно становиться разработчиком. Но важно уметь собрать первичную диагностику и прийти к команде не с фразой “что-то не работает”, а с конкретным наблюдением: при клике событие не отправляется, цель уходит в другой счётчик, страница перезагружается раньше, чем событие успевает обработаться, или в консоли появляется ошибка скрипта.
Это особенно важно перед запуском новой посадочной страницы, после правок на сайте и при расхождениях между рекламным кабинетом и аналитикой. Визуально страница может выглядеть так же, но после замены формы, класса кнопки, ID элемента или порядка загрузки скриптов цели уже не будут работать корректно.
Как открыть консоль разработчика в браузере
Горячие клавиши. Это самый быстрый способ, если нужно проверить работу формы, посмотреть ошибки или убедиться, что события отправляются в Метрику. После нажатия комбинации клавиш панель DevTools появится внизу или сбоку страницы.
Контекстное меню. Если сочетания клавиш не работают или не хочется их запоминать, консоль можно открыть через страницу сайта. Для этого достаточно кликнуть правой кнопкой мыши по любому элементу и выбрать пункт «Просмотреть код». Браузер откроет DevTools и сразу покажет нужный блок страницы. Это особенно удобно, если важно проверить конкретную кнопку, форму или изображение.
❗️ Не путайте «Просмотреть код» и «Просмотр кода страницы». Первый пункт открывает DevTools, а второй — исходный HTML в отдельной вкладке.
Как найти ошибки на сайте — и что с ними делать
Откройте DevTools и перейдите во вкладку Console. Она показывает сообщения, которые браузер выводит во время загрузки страницы и действий пользователя, в том числе предупреждения и служебные записи. Если после обновления сайта, установки виджета или подключения нового сервиса что-то перестало работать, начать проверку стоит именно с этой вкладки.
Повторите проблемный сценарий. Ошибка может появиться после конкретного действия: отправки формы, клика по кнопке, открытия чата или перехода к оплате. Воспроизведите тот же путь, на котором пользователь столкнулся со сбоем, чтобы связать сообщение в Console с реальной проблемой.
Найдите ошибку. После повторения проблемного сценария посмотрите, появилась ли в Console красная строка: она означает, что браузер зафиксировал сбой во время действия пользователя. Из-за него форма может не отправить заявку, а виджет — не загрузиться.
Жёлтые сообщения указывают на предупреждения, которые не всегда мешают работе сайта в моменте. Поэтому их можно оставить на потом.
Сопоставьте текст ошибки с проблемой на сайте. По сообщению в Console можно примерно понять, что не так.
Как проверить теги аналитики и пиксели
Откройте DevTools и перейдите во вкладку Network. Бывает так, что после запуска рекламы заявки есть, а конверсии в Яндекс Метрике или рекламном кабинете не отображаются. В такой ситуации важно понять, отправляет ли сайт данные после действий пользователя или проблема возникла где-то дальше.
Повторите действие, которое должно запускать событие. Например, откройте страницу, нажмите кнопку или отправьте форму. Во вкладке Network появятся запросы, которые сайт отправляет в разные сервисы. По ним можно проверить, дошли ли данные до Яндекс Метрики, Google Tag Manager или рекламного пикселя.
Найдите нужный сервис через поиск. Для Яндекс Метрики введите mc.yandex.ru, для Google Tag Manager — googletagmanager.com, а для VK Реклама — vk.com/rtrg. Если после действия появился запрос со статусом 200, сервис получил данные. Если нет — событие не отправилось.
Статус 200 показывает только одно: сервер получил запрос и ответил на него. Это хороший технический сигнал, но он не подтверждает, что Метрика засчитала конверсию.
Дальше нужно проверить, куда ушло событие и совпадает ли оно с настройками цели: номер счётчика, идентификатор, условия срабатывания и фильтры. Часто запрос отправляется успешно, но попадает в старый, тестовый или подрядческий счётчик. В консоли всё выглядит корректно, а в рабочем отчёте конверсий нет.
На скриншоте ниже видно, что после отправки формы, запрос к mc.yandex.ru появился в списке. Значит, проблема с конверсиями, если она есть, возникла не на этапе передачи данных в Метрику. В такой ситуации стоит проверить настройки целей и отчётов.
Как проверить форму, CRM и сторонние сервисы
Если после обновления сайта, запуска рекламы или подключения новой интеграции заявки перестали поступать, проверьте отправку формы через вкладку Network. Это поможет понять, передал сайт данные в CRM или проблема возникла на стороне внешнего сервиса.
Для этого отправьте тестовую заявку и посмотрите на новые строки, которые появились в списке. Нажмите на самую свежую и найдите поле Status. По коду ответа можно определить, принял ли внешний сервис данные или вернул ошибку.
- 200 — сайт передал данные. Проверьте, появилась ли заявка в CRM, и убедитесь, что менеджеры не отключили уведомления или правила обработки лидов.
- 400 — сервис не принял данные. Попробуйте отправить форму ещё раз с другими данными. Например, укажите другой номер телефона или имейл. Если ошибка повторяется, сделайте скриншот и передайте его разработчику.
- 404 — сайт не нашёл адрес, куда нужно отправлять заявку. Такое бывает после обновления сайта или замены формы. Попробуйте откатить изменения и проверьте настройки формы.
- 500 — ошибку вернул сервер или внешний сервис. В этом случае стоит проверить CRM или обратиться к специалисту по интеграции.
Отдельно стоит проверить момент, когда сайт отправляет событие в аналитику. Частая проблема — событие вызывается прямо перед переходом на другую страницу, отправкой формы или закрытием окна. Пользователь нажал кнопку, страница мгновенно ушла дальше, заявка внешне отправилась, но аналитическое событие не успело корректно обработаться.
Есть и обратная ситуация: цель повесили на клик по кнопке “Отправить”, но форма не прошла валидацию. Тогда в Метрику уходит конверсия, хотя заявки нет. Поэтому для форм лучше проверять не только клик, но и успешную отправку данных.
Как посмотреть мобильную версию сайта без смартфона
Откройте DevTools и нажмите на значок телефона и планшета в верхней панели. Он включит Device Toolbar — режим, в котором браузер показывает страницу так, как её увидит пользователь на смартфоне. С его помощью можно протестировать сайт и вовремя отловить недочёты. К примеру, заметить, что текст выходит за рамки поля.
Выберите модель устройств. Например, iPhone 15, Pixel 8 или iPad. Если нужного варианта нет в списке, можно задать ширину и высоту экрана вручную.
Проверьте путь пользователя до заявки: первый экран, меню, форму и кнопку отправки. Переключайтесь между несколькими популярными размерами устройств и смотрите, не закрывают ли баннеры важные элементы. Если на одном из размеров они мешают оставить заявку, исправьте проблему до запуска рекламы.
Например, мы выбрали размер экрана 400 × 638󠆏 пикселей. При желании, его можно поменять вручную:
Как проверить скорость загрузки страницы
Откройте DevTools и перейдите во вкладку Performance. Она показывает, какие элементы замедляют загрузку. Проверку стоит провести, если сайт стал работать медленнее после обновления, установки виджета или добавления новых изображений.
Нажмите кнопку записи и обновите страницу. После загрузки остановите запись. DevTools покажет, сколько времени заняла загрузка и какие элементы повлияли на скорость.
Обратите внимание на предупреждения Core Web Vitals. Они показывают проблемы, которые мешают пользователю работать со страницей: медленную загрузку, задержку реакции и смещение блоков. Например, высокий CLS означает, что элементы двигаются уже после загрузки. Из-за этого пользователь может нажать не на ту кнопку или потерять поле формы, которое начал заполнять.
Маркетологу лучше смотреть CLS отдельно по мобильным и десктопным пользователям. Среднее значение может скрыть проблему: у большинства посетителей всё нормально, а у части мобильной аудитории страница сильно “прыгает”. Если сдвиг появляется в зоне формы, цены, CTA-кнопки или оплаты, его стоит разбирать даже при не самом высоком общем CLS.
Универсального значения CLS, после которого конверсия гарантированно падает, нет. Официальный ориентир Google такой: до 0,1 — хорошее значение, от 0,1 до 0,25 — зона риска, выше 0,25 — серьёзная проблема визуальной стабильности.
Но для конверсии важнее не само число, а место, где происходит сдвиг. CLS 0,15 на второстепенном блоке может почти не повлиять на заявки. А небольшой скачок рядом с кнопкой, формой, корзиной или оплатой может стоить конверсий, потому что пользователь промахивается, теряет фокус или перестаёт доверять странице.
Как посмотреть заголовки, метатеги и структуру страницы
Откройте DevTools и перейдите во вкладку Elements. Этот раздел пригодится, если нужно проверить SEO-базу — title, description и H1 — после публикации или обновления страницы. Через поиск по коду можно найти нужный тег и перепроверить данные.
Нажмите Ctrl + F и введите название нужного тега: title, description или h1. DevTools подсветит строку в коде и покажет её содержимое. Если на странице несколько H1 или основной заголовок не соответствует содержанию, передайте замечание специалисту по SEO или разработчику.
Как посмотреть подключённые сервисы и скрипты
Откройте DevTools и перейдите во вкладку Network или Sources. Такая проверка нужна, если сайт передавали нескольким подрядчикам, и никто точно не знает, какие счётчики, пиксели и сервисы остались в коде.
Обновите страницу и введите название сервиса в строке поиска. Например, metrika, googletagmanager, jivosite или callibri. Если DevTools показывает несколько одинаковых счётчиков или инструменты, которыми уже не пользуются, стоит проверить настройки. Лишние скрипты могут собирать данные в старые рекламные кабинеты, замедлять загрузку страницы и мешать работе аналитики.
Два счётчика Метрики на сайте не всегда означают ошибку. Иногда один принадлежит владельцу бизнеса, второй — агентству. Или один используют для общей аналитики, а второй — для отдельного проекта, поддомена или рекламной кампании.
Проблема начинается, когда команда не зафиксировала роли счётчиков. События могут уходить в один счётчик, цели храниться в другом, а отчёты строиться по третьему. В итоге сайт работает, запросы возвращают статус 200, но специалисты видят разные цифры и делают выводы по неполным или противоречивым данным.
Если несколько счётчиков стоят намеренно, нужно заранее определить основной: где настроены цели, какой счётчик связан с рекламой и какой использовать в отчётности.
Коротко: как маркетологу использовать консоль разработчика
- Начните с простой проверки своего сайта. Откройте DevTools, отправьте тестовую заявку и убедитесь, что данные дошли до сервиса аналитики и CRM. Так вы заметите проблему до того, как она начнёт влиять на заявки и бюджет.
- Перед запуском рекламы проверьте путь до заявки: откройте страницу, отправьте форму, посмотрите ошибки в Console и запросы в Network. Благодаря этому поймёте, передаёт ли сайт данные в Метрику, CRM и рекламные системы.
- После этого проверьте страницу глазами пользователя: откройте сайт в мобильном режиме, посмотрите скорость загрузки и убедитесь, что кнопки, формы и баннеры не мешают оставить заявку. Эти ошибки напрямую влияют на конверсию, даже если сама реклама настроена правильно.
Сервисы Callibri
Автоматизируем работу с лидами на всех этапах воронки
Помогаем понять, какая реклама приводит платящих клиентов
Делаем работу маркетинга прозрачной и эффективной
Частые вопросы маркетологов о консоли разработчика
Как открыть консоль, если горячие клавиши не работают?
Откройте меню браузера и перейдите в инструменты разработчика. В Chrome, Яндекс Браузере и Edge путь выглядит так: три точки → «Дополнительные инструменты» → «Инструменты разработчика». В Safari сначала нужно включить меню «Разработка» в настройках.
Можно ли сломать сайт, работая в консоли?
Нет. Изменения, которые вы вносите через DevTools, видны только в вашем браузере и исчезают после обновления страницы. Консоль подходит для проверки и диагностики, поэтому случайно изменить сайт для всех посетителей не получится.
Как разрешить вставку кода в консоль Яндекс Браузера?
Введите в консоли команду allow pasting и нажмите Enter. После этого браузер разрешит вставлять команды до закрытия вкладки.
Какие задачи маркетолог может решать через консоль разработчика?
С помощью DevTools можно проверить работу форм и целей в Метрике, найти ошибки после обновления сайта и убедиться, что события доходят до рекламных систем. Ещё через консоль разработчика можно посмотреть мобильную версию страницы, оценить скорость загрузки и определить, какие сервисы подключены к сайту.
У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.
Нажимая «подписаться», вы соглашаетесь с правилами получения рекламных рассылок
Опубликуйте статью в блоге Callibri
Подойдут материалы про маркетинг, продажи и клиентский сервис