Маркетологу: как применять бесплатные инструменты веб-разработчика прямо в браузере Google Chrome

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

Чаще всего инструменты разработчика называют просто консолью, но консоль — это только один из инструментов. Разбирать будем Chrome, так как маркетологи обычно работают в нём из-за большого количества расширений. «Хромоподобные» браузеры также подходят.

Приступим. Для начала откроем инструменты. Есть 4 способа:

1. нажать F12;
2. нажать Ctrl + Shift + I;
3. кликнуть в любом месте страницы правой кнопкой мыши и в контекстном меню выбрать пункт «Просмотреть код»;
4. перейти в меню браузера → Дополнительные Инструменты → Инструменты Разработчика.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

После этого вы увидите новую панель.

Это и есть инструменты разработчика. Теперь можно и поговорить о конкретных фишках.

Посмотреть мобильную версию сайта

Слева вверху нажмите на иконку с двумя экранами и обновите страницу.

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

Просмотреть код элемента

Иногда вам нужно увидеть код не всей страницы, а конкретного объекта. Либо получить его селектор. Для этого кликните правой кнопкой мыши по нужному объекту и выберите пункт «Просмотреть код».

При этом на панели справа будет подсвечен код этого элемента.

Теперь кликните правой кнопки мыши по этому коду и перейдите в меню копирования. Скопируйте весь элемент или селектор.

Данная операция очень полезна при настройке триггеров в Google Tag Manager или при работе, например с подменами номеров на сайте при работе с сервисом коллтрекинга.

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

Поиск счётчиков систем аналитики

Если вы не пользуетесь расширениями типа analytics debugger, tag assistant, Яндекс. Метрика, то вы всё равно имеете возможность посмотреть id системы аналитики в коде страницы. Для этого в инструментах разработчика зайдите на вкладку Elements, нажмите Ctrl + F. В появившейся строке введите символы для поиска и получите результат. Если что, ещё можно на стрелочки понажимать.

(У нас на сайте не так все просто, поэтому в коде нет id метрики). Данный способ поможет с любым поиском, но имейте в виду — не всегда идентификаторы каких-то тегов можно найти на странице.

Отслеживание событий

Если вам необходимо проверить, какие события отправляются в Яндекс.Метрику или Google Analytics, то на вкладке Console можно получить эту информацию. Необходимо сделать несколько подготовительных действий. Для GA установите расширение analytics debugger (о работе с ним рассказано здесь), а для Метрики прочтите справку. При этом вам будет полезна кнопка очистки консоли (перечёркнутый круг) и настройка Preserve log, которая продолжает запись в консоли после обновления страниц.

Полноценная JavaScript-консоль

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

А это значит, что вы сможете отправлять коды событий систем аналитики или пикселей соцсетей, чтобы проверить их корректность. Например, проверка пользовательского события для GTM.

Мы отправляем событие в консоль и видим, что оно корректно фиксируется GTM. Значит, его можно использовать в ТЗ для разработчиков. Если во время загрузки страницы появляются какие-то ошибки или предупреждения, вы тоже их увидите на вкладке консоли.

Создание переменных GTM типа «Собственный код JavaScript»

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

Время загрузки элементов

На вкладке Network можно увидеть, какие элементы загружаются, как быстро и с каким размером.

А если вам предстоит работать с протоколом передачи данных Analytics, могут быть интересны строки, начинающиеся с “collect?v=1&”, в них можно посмотреть примеры передаваемых параметров.

Работа с куки

На вкладке Application в разделе Cookies можно полностью очистить файлы cookies, удалить или отредактировать выборочные.

Для одного обзора достаточно. На самом деле возможностей куда больше, и опять же, подойдут они не только разработчикам. Если хочется узнать больше, то обязательно загляните в справку Google.

Источник фото на тизере: Oleg Laptev on Unsplash

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.