Главная | Блог | Темы | Маркетинг | Консоль разработчика в браузере — подробный гид по использованию для маркетологаКонсоль разработчика в браузере — подробный гид по использованию для маркетолога 27 сентября 2022 15 мин на чтение 74 082 маркетинг гайды маркетинг гайды Юлия УсачеваРедактор блога Calltouch Содержание Нет времени читать? В каждом браузере пользователь может открыть инструменты разработчика и изучить структуру любого интернет-ресурса. Консоль подходит для тестирования сайтов, устранения багов, изучения программирования на примере готового кода, а также для решения маркетинговых задач. Рассказываем, как пользоваться консолью разработчика и какие команды полезно знать маркетологу.Что такое консоль разработчикаКонсоль разработчика (Development Console) — это панель в браузере, которая содержит несколько вкладок, отражающих те или иные элементы и свойства сайта. Эти вкладки называют инструментами разработчика, или DevTools.Для маркетологов сайт компании — это источник продаж. Важно оценить юзабилити, дизайн, скорость его работы — все, что поможет продавать больше. С помощью консоли разработчика можно редактировать содержание сайта в браузере (ваша версия не будет доступна на устройствах других пользователей), наметить изменения и сформулировать задачу для разработчиков. Как открыть консоль в разных браузерахЗапуск инструментов разработчика в разных браузерах практически идентичен. Их можно открыть с помощью клавиши F12, комбинации кнопок на клавиатуре или функции просмотра кода в самом браузере. Алгоритм запуска с помощью клавиатуры может отличаться в зависимости от вашего устройства. Например, на некоторых ПК кнопка F12 переводит устройство в режим полета, — чтобы открыть консоль разработчика, необходимо зажимать дополнительные клавиши.Google ChromeВот способы вызова консоли:Нажмите на клавиатуре F12 (или Fn + F12) или комбинацию Ctrl + Shift + I.Кликните в любом месте страницы правой кнопкой и активируйте опцию «Просмотр кода страницы».Откройте настройки браузера — кликните на иконку с тремя вертикальными точками в правом верхнем углу страницы. Наведите курсор на «Дополнительные инструменты» — «Инструменты разработчика» и активируйте функцию.ЯндексВарианты запуска консоли в Яндекс Браузере:С помощью комбинации Ctrl + Shift + I.Через меню в правой части окна вверху. Путь: «Дополнительно» — «Дополнительные инструменты» — «Инструменты разработчика».SafariЭто браузер для iOS. Способы открытия DevTools:Комбинация клавиш Command + Option + I.Меню настроек в верхнем левом углу окна. Необходимо последовательно активировать опции «Настройки» — «Разработка» — «Показать веб-инспектор». Маркетинг Читайте также: Что такое валидный email, и как проверить почту на существование Что такое валидный email, и как проверить почту на существование Элементы консолиВ разных браузерах консоль разработчика может выводиться в различных частях экрана, например в Chrome — справа, в Mozilla — внизу. Незначительные различия могут быть и в дизайне вкладок. Однако структура и функциональные возможности консоли будут идентичными. Рассмотрим содержание вкладок на примере Google Chrome.Elements. Это окно с информации о HTML-странице, то есть о визуальном наполнении сайта. В нем можно увидеть стандартные теги, атрибуты и скрипты. Ориентироваться в коде помогает цветовая дифференциация: фиолетовым оттенком обозначены теги, коричневым — их параметры, синим — содержание свойств, зеленым — замечания разработчиков. Подчеркиванием отмечены ссылки, а серым треугольником слева — дополнительная информация, которую можно изучить, кликнув на этот значок.Если внести новые данные в атрибуты тегов в коде, внешний вид страницы изменится автоматически. Обновление вернет ей прежний дизайн. Также для HTML-разметки предусмотрено дополнительное меню, включающее разделы Styles, Computed, Layout, Event Listeners и прочие. С их помощью можно посмотреть CSS и другие элементы страницы.Код главной страницы ЯндексаConsole. На этой вкладке вы можете изучать работу сайта в режиме реального времени: увидеть данные об ошибках на сайте; ознакомиться с выполняемым в данный момент JavaScript-кодом (действиями на сайте) — для этого используйте метод console.log;ввести свои команды и наблюдать за откликом системы или ее модулей;настроить фильтры на отображаемые сведения;искать информацию по тегу, фразе или слову.Аналитика помогает улучшить работоспособность ресурса.Sources. Эта вкладка демонстрирует иерархию сайта полностью. В ней отображены:картинки, шрифты и другие элементы дизайна;CSS-файлы;взаимосвязи с внутренними и внешними ресурсами — виджетами, API, аналитическими счетчиками.Сам инструмент состоит из трех областей: навигатора с иерархически связанными файлами, исходного кода и окна отладки.Виджеты Calltouch помогут вам увеличить конверсию сайта и объем продаж. Настройте окно обратного звонка, умную заявку или мультикнопку, чтобы пользователь смог оставить свои контакты в любое, даже нерабочее время. Программа обработает данные и передаст их в ваш колл-центр, а сотрудники оперативно свяжутся с клиентом и доведут его до сделки. За короткое время вы увидите, как вырастут продажи и уровень лояльности клиентов. ВиджетыВиджеты CalltouchУвеличьте конверсию сайта на 30% Подробнее Network. Это раздел для записи сетевого журнала. С его помощью отслеживают трафик: количество и время посещений, типы запросов на сервер, скорость обработки файлов. Все это помогает оптимизировать компоненты сайта.Performance. Здесь отображаются сведения о времени, которое необходимо для загрузки элементов, выполнения JS-кода и других операций. Они помогут оптимизировать сайт, чтобы пользователи не покидали его из-за медленной загрузки.Memory. Это инструмент для отслеживания объема памяти, которую используют элементы сайта или приложения. «Тяжелые» компоненты, активно нагружающие систему, лучше оптимизировать.Application. Вкладка, с помощью которой можно изучать и очищать загруженные ресурсы — кэш, базы данных, cookies.Security. Это раздел с информацией о безопасности ресурса. Доступны следующие сведения:тип сертификата безопасности и сведения о его проверке;наличие TLS-соединения — современных протоколов;конфиденциальность связанных с сайтом ресурсов.Lighthouse. Это панель аудита — ее инструменты автоматически анализируют сайт и предоставляют рекомендации для его улучшения.Как консоль может облегчить жизньРассмотрим, как команды для консоли в браузере помогают в работе маркетолога или другого непрофильного специалиста.Редактирование элементов сайта без сохранения. Вы можете не только просматривать, но и изменять любые элементы, отображаемые в консоли. Например, отредактировать текст внутри тегов, поменять стили, размер элементов, изображения. Все корректировки будут отображаться только в вашем браузере и только до тех пор, пока вы не перезагрузите страницу.Поиск шрифтов и стилей. Эта возможность пригодится, если вы редактируете страницу через CMS. Консоль поможет быстро отыскать элемент и изменить его содержимое. Алгоритм поиска прост:Нажмите одновременно Ctrl + F, чтобы запустить поисковую строку.Впишите нужный вам элемент и нажмите на «Enter». Чтобы изменить внешний вид страницы, найдите файл CSS. Для поиска и изменения шрифтов выполните поиск по слову «font» — внутри строки вы увидите стандартный вариант начертания, например Arial или Sans Serif.Скачивание изображений. Функциональные возможности новых сайтов не всегда позволяют скачать картинку с помощью правой кнопки и опции «Сохранить изображение как». Воспользуйтесь консолью:Кликните правой кнопкой на картинку, а левой — на «Посмотреть код» (или «Посмотреть код элемента») в открывшемся меню.Появится окно со строкой, выделенной серым оттенком. В ней будет располагаться ссылка на изображение. Кликните по ней.Картинка откроется в соседней вкладке — перейдите в нее и сохраните файл стандартным способом, используя правую кнопку мыши.Картинка может быть установлена на сайте в виде обоев — тег background-image в CSS. В этом случае:Откройте в консоли панель Elements и наводите курсор на строки, содержащие тег. Параллельно с перемещением курсора будут высвечиваться области страницы, которые соответствуют выбранному элементу.После того как высветится нужное изображение, кликните по ссылке правой кнопкой, откройте его в новой вкладке и сохраните обычным способом.Отображение сайта на разных экранах. Вы можете переключить страницу на мобильную версию. Для этого: Откройте консоль и вверху, рядом с вкладкой Elements кликните на иконку в виде большого и маленького экранов смартфона.В верхнем меню окна кликните на «Responsive» (или «Dimention: Responsive») и в выпадающем меню выберите нужную вам модель мобильного устройства.Оцените юзабилити мобильной версии сайта. Если вы хотите узнать, как работает ресурс при нестабильном соединении, поменяйте в верхнем горизонтальном меню свойство «No throttling» на «Low-end мobile». Если появляются ошибки, попросите разработчика оптимизировать сайт.Работа с куки. Эти файлы собирают информацию о посетителе, которая может мешать корректному отображению сайта. Чтобы очистить cookies:Откройте консоль, затем — «Application», зайдите в «Cookies».Выберите нужный сайт, затем кликните по нему правой кнопкой и запустите опцию «Clear». Закройте консоль и обновите страницу.С помощью консоли разработчика вы протестируете интерфейс и скорость работы сайта, а оценить эффективность ваших маркетинговых кампаний поможет Сквозная аналитика Calltouch. Сервис соберет данные с рекламных площадок, учтет все расходы на маркетинг и вычислит ROI. Вы узнаете количество привлеченных клиентов, размер прибыли по каждой кампании и сможете отказаться от неэффективных площадок. Сквозная аналитикаОценивайте эффективность всех рекламных кампаний в одном окне от клика до ROIВкладывайте в ту рекламу, которая приводит клиентов ПодробнееГлавное в статьеС помощью консоли разработчика можно оценить качество и удобство работы сайта и отредактировать его содержимое.DevTools позволяет маркетологу найти ошибки на сайте, создать более удачное оформление и передать разработчику запрос на оптимизацию.С HTML-кодом и CSS работают во вкладке Elements, а в разделе Sources просматривают иерархию сайта. Информация в других вкладках отображает работу сайта в режиме реального времени: код, трафик, скорость, память.С помощью консоли вы можете изменить шрифты и стили, скачать картинки с сайта, а также проанализировать работу его мобильной версии на различных устройствах и при разной стабильности сети. Юлия УсачеваРедактор блога Calltouch