Как открыть режим разработчика в браузере

Инструменты разработчика

Встроенные инструменты разработчика особенно полезны при создании и отладке веб-страниц.

Доступ к инструментам разработчика:

• Откройте веб-страницу или веб-приложение и выберите Инструменты > Инструменты разработчика в меню Vivaldi.
• Откройте веб-страницу или веб-приложение, нажмите правой кнопкой мыши на любой элемент страницы и выберите Инспектировать в контекстном меню.
• Используйте сочетание F12 / ⇧⌘I , чтобы быстро открыть Инструменты разработчика.

Размещение инструментов разработчика:

• После того, как вы открыли Инструменты разработчика, нажмите кнопку с вертикальным многоточием ⋮ и выберите Dock side.

Was this page helpful?

Let us know if something’s missing from this article. That’s the only way we can improve.

Режим разработчика в Google Chrome

Современные браузеры перестали быть просто инструментами для поиска информации в Интернете. Разработчики дополняют свое детище новыми возможностями, дабы повысить комфорт пользователей, прорекламировать платформу. Сегодня мы поговорим о том, как включить режим разработчика Google Chrome. Также в процессе повествования рассмотрим несколько интересных фишек при работе с консолью и отладчиком.

Подробности

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

• разработчикам расширений, верстальщикам сайтов;
• людям, изучающим HTML и CSS;
• тестерам готового продукта.

Как правило, особое отображение информации на странице открывает человеку возможность увидеть профессиональную верстку. За счет этого его обучаемость просто взрывается.

Для активации особого режима работы достаточно:

1. Запустить Google Chrome и кликнуть ЛКМ по главной кнопке в правом верхнем углу экрана.
2. В системном меню навести курсор на «Дополнительные инструменты».
3. Затем выбрать пункт «Инструменты разработчика».

После этого правую половину пользовательского интерфейса займет окно со множеством вкладок, гигатоннами кода и элементов верстки.

Как говорилось выше, для активации особого режима достаточно использовать волшебное сочетание клавиш Ctrl + Shift + I .

Дополнение

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

Список представлен ниже:

• Поиск в исходном коде – сочетание клавиш Ctrl + Shift + F активирует миниатюрную поисковую строку, использование которой упрощает нахождение регулярных выражений или однотипных команд.
• Пара кареток и выделений – теперь можно работать на нескольких строках одновременно. Достаточно зажать Ctrl, выделить нужные поля, и приступать к работе.
• Переход к строке – после открытия файла во вкладке Sources зажимай Ctrl + G , после чего вводим номер строки (мгновенный переход обеспечен).
• «Прическа» для минимизированных исходников – в режиме разработчика есть кнопка (левый нижний угол), которая автоматически «трансформируют» сокращенные исходники в удобочитаемую форму.
• Режим устройства – это отличная возможность проверить адаптивность разработанного сайта на разных платформах. Также присутствует эмуляция сенсорного касания к дисплею.

Это далеко не полный перечень возможностей инструмента, но и они дают понять, насколько в Google заморочились ради пользователей.

Подведем итоги

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

Chrome DevTools

Chrome DevTools — это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.

Освойте профессию «Frontend-разработчик»

Как начать работу с DevTools

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

1. Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.
2. В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.
3. Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Какие вкладки есть в DevTools

Elements. Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript, изменить элементы DOM (программного интерфейса (API) для HTML- и XML-документов). Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Для того чтобы применить исправленное, необходимо поработать с соответствующими файлами на веб-сервере.

Console. Консоль позволяет смотреть вывод JavaScript, а также исполнять свой код для тестирования и отладки страницы. Если на открытой странице не подгрузились какие-либо данные, например стили, шрифты или картинки, здесь отобразятся соответствующие ошибки с подробным описанием. Также в консоль можно ввести команду на языке JavaScript, и она выполнится.

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

Network. На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.

Performances. Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. Здесь можно увидеть показатели FPS, загрузки CPU и сетевые запросы, необходимые данные и инструменты для повышения производительности страницы. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. После первого построения таймлайнов можно найти данные о всем жизненном цикле страницы и выполнении кода.

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

Читайте также Кто такой frontend-разработчик?

Memory. Здесь расположено несколько инструментов, которые помогают отслеживать, какую нагрузку на систему оказывает выполнение кода:

• Heap Snapshot. С помощью него можно посмотреть, как распределяется память между объектами JavaScript и связанными с ними элементами DOM.
• Allocation instrumentation on timeline. Этот инструмент используется для устранения утечек памяти. Он показывает, как распределяется память между переменными в коде.
• Allocation sampling. Профайлер записывает, как распределяется память на отдельные функции JavaScript.

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

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

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Lighthouse. На этой вкладке можно проверить производительность сайта.

• Performance. Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей.
• Progressive Web App. Позволяет проверить, регистрирует ли сайт Service Workers, возможна ли работа сайта офлайн, а также возвращает ошибку 200.
• Best Practices. Помогает проверить безопасность сайта и узнать, применяются ли современные стандарты веб-разработки. На показатель влияет использование устаревших API, HTTPS, корректность кодировки и многое другое.
• Accessibility. Позволяет узнать, насколько удобен сайт, как воспринимается контент и можно ли управлять интерфейсом и передвигаться по сайту без мыши.
• SEO. Позволяет понять, насколько соблюдаются рекомендации Google по оптимизации сайта. На показатель влияют использование метатегов, наличие alt у изображений, адаптивная верстка и пр.

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Основные инструменты и как их использовать

Поиск нужного DOM-элемента. На панели Elements находится полное DOM-дерево, которое можно просмотреть и изменить. Найти конкретный элемент можно двумя способами.

1. Выбор элемента на странице

Необходимо навести курсор, например на картинку на сайте, нажать правую кнопку мыши и выбрать «Просмотреть код». В DOM-дереве код выбранного элемента будет подсвечен.

2. Использование функции поиска HTML-компонента

Для этого надо кликнуть по кнопке со стрелкой в левом верхнем углу консоли, а затем — по необходимому элементу на странице.

Редактирование HTML. В консоли отображаются абсолютно все элементы: div, section, footer и т. д. Чтобы, например, изменить текст, достаточно кликнуть по нему два раза. Такие же действия доступны для классов и типов данных. Чтобы редактировать конкретную часть кода, нужно кликнуть по имени класса или самому слову class. Помимо этого, можно редактировать сразу большой участок текста или, например, названия атрибутов. Необходимо просто кликнуть правой кнопкой мыши по необходимому элементу и выбрать нужную опцию.

Работа с CSS. Под редактором HTML располагается консоль работы со стилями. В Chrome DevTools можно отключать и включать любое свойство одним кликом по чекбоксу слева. Также именно Chrome DevTools имеет удобную палитру для выбора оттенка цвета и позволяет настраивать угол наклона градиента. Здесь представлена визуализация отступов элемента, поэтому можно с легкостью настроить положение одного объекта относительно других. Это далеко не полный список всех удобных функций.

Поиск и исправление «мертвого» кода. Иногда в файлах CSS и JavaScript содержится много кода, который присутствует, но нигде не используется. Его наличие напрямую влияет на производительность сайта. В Chrome DevTools для этого предусмотрен инструмент Coverage. На панели со всеми основными вкладками (Elements, Console и т.д.) с правой стороны есть три точки. Необходимо кликнуть по ним и выбрать More Tools, где расположен Coverage. Внизу появится новая вкладка, где представлены данные о неиспользуемых CSS и JavaScript в процентном выражении. Если кликнуть по одному из них, можно увидеть все строки кода с цветовым обозначением: красные — используемые, синие — неиспользуемые. Чтобы повысить производительность сайта, нужно убрать неиспользуемый код.

Структурирование кода. Код, в котором отсутствуют «мертвые» элементы, улучшает производительность сайта, но сложен для восприятия (иногда бывают удалены даже пробелы и переносы строк). Chrome DevTools позволяет его структурировать. На вкладке Elements необходимо выбрать любой минифицированный ресурс (CSS, JS или HTML), после чего в новой вкладке отобразится содержимое, а снизу появится иконка с изображением фигурных скобок. Нажав на них, Chrome DevTools структурирует код, который подходит для внесения каких-либо изменений.

Просмотр внешнего вида сайта на разных устройствах. В режиме разработчика Google Chrome можно посмотреть, как выглядит текущая страница практически на любом устройстве. Сделать это можно комбинацией клавиш Ctrl + Shift + M для Windows и Linux и cmd + Shift + M для macOS. Также можно кликнуть на значок телефона в левом верхнем углу консоли. Теперь можно выбрать абсолютно любое разрешение или конкретное устройство из списка Dimensions. Также инструмент позволяет посмотреть, как будет отображаться страница при разной скорости интернета.

Это далеко не полный список всех возможностей и полезных функций Google Chrome Developer Tools. Но чтобы разобраться в них, необходимо рассматривать каждый инструмент подробно и в отдельности, соблюдая логическую структуру. Узнать подробнее вы можете на портале Chrome Developers в разделе документации DevTools.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Улучшаем сайт через консоль разработчика в браузере

Консоль разработчика в браузере («Хром», «Файерфокс», «Сафари» или т. п.)представляет собой инструмент, который позволяет:

• Ознакомиться со структурой и содержимым web-страницы;
• Обнаружить и исправить имеющиеся на ней ошибки;
• Определять целый ряд показателей и проводить различные полезные манипуляции с самой страницей (если вы знаете, как).

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

Ознакомление с консолью и основные инструменты

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

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

Вышеперечисленное говорит о том, что при правильном подходе данный инструмент может быть полезным не только профессиональным программистам, но и дизайнерам, верстальщикам и даже маркетологам… И именно с точки зрения последних мы его и рассмотрим. В данном контексте сразу же выстраивается достаточно чёткая схема, в которой сайт является каналом для совершения продаж.

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

Он поможет получить сведения о тех или иных элементах сайта. Как открыть консоль разработчика в браузере «Хром», которую мы и рассмотрим? Просто наведите на любую область сайта курсор и кликните правой кнопкой мыши. Перед вами раскроется вот такое меню:

Ещё одна возможность сделать это – использовать сочетание клавиш “Ctrl + Shift + C” или нажать “F12” (и консоль откроется с правой стороны).

Если это первый ваш заход в неё, то скорее всего вы испытаете некоторое напряжение, увидев большое количество панелей и инструментов, да ещё и на английском языке. На первый взгляд разобраться с этим не так-то и просто, однако дорогу осилит идущий. Присмотритесь – и вы поймёте, что все сведения представлены в определённом порядке, а это уже что-то!

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

Оказываем техническое обслуживание сайта
С гарантированным временем реакции и фиксированным сроком выполнения задач

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

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

Ознакомление с основными элементами консоли

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

• Перемещение блоков на панели;
• Изменение их размеров;
• Перемещение самой консоли.

Для последнего достаточно раскрыть специальное меню, нажав на значок из трех вертикальных точек в правой верхней части.

Чтобы изменить размер блока, просто наведите курсор на границу между блоками и потяните в нужную сторону. Для смены представления нажмите на значок из трех вертикальных точек и выберите любой из вариантов размещения с надписью “Закрепить сбоку”. Все варианты представлены в одну линию и отображены графически, поэтому выбор не станет проблемой. В соответствии с ними консоль может быть расположена в отдельном окне, слева, справа или внизу окна.

Интерфейс представлен следующим:

• Панелью “Элементы”;
• Панелью свойств “Стили”;
• Панелью вывода “Консоль”.

Они расположены одна под другой, и рассматривать их мы будем по порядку от верхней к нижней.

Вкладка “Элементы”

В ней представлено древо элементов сайта, которое доступно как в свёрнутом, так и в развёрнутом виде. Первое имеет место быть если не был выбран отдельный элемент, и позволяет увидеть, что помимо скриптов сайт включает в себя и . Чтобы проще ориентироваться, достаточно понять, что:

• объявленные элементы подсвечиваются фиолетовым;
• Их свойства и характеристики подсвечиваются коричневым;
• Расшифровка их характеристик подсвечивается синим;
• Комментарии разработчика подсвечиваются зелёным;
• Ссылки выделены подчёркиванием.

Все элементы доступны к открытию нажатием на треугольник серого цвета с левой стороны.

Вкладка “Консоль”

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

Вкладка “Источники”

Она позволяет увидеть связь сайта с другими (как внешними, так и внутренними). Именно здесь можно отследить её со счётчиками web-аналитики, API и социальными сетями. В этом же разделе представлен и код источника данных, который позволяет корректировать взаимодействия.

Вкладка “Сеть”

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

Вкладка “Производительность”

Она предназначена для записи сеанса взаимодействия с сайтом и позволяет увидеть то, как функционируют те или иные его элементы:

• Время, необходимое на загрузку;
• Объём затрачиваемых ресурсов.

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

Вкладка “Память”

Здесь можно увидеть распределение времени исполнения и памяти web-страницы по внутренним ресурсам. Таким образом можно понять, какие именно элементы дают максимальную нагрузку на систему.

Вкладка “Приложение”

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

Вкладка “Безопасность”

Здесь пользователь может работать с сертификатами безопасности и получать данные о безопасности соединений.

Вкладка “Lighthouse”

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

Элементы панели свойств и характеристик

Опускаемся на уровень ниже и разбираем следующие семь вкладок.

Вкладка “Стили”

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

Вкладка “Computed”

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

Вкладка “Макет”

В ней можно увидеть элементы, отображаемые на сайте, типа “Grid”, которые применяются достаточно редко.

Вкладка “Прослушиватели событий”

В ней можно увидеть все элементы обработки событий для выделенной web-страницы или её части. Это могут быть изменения оформления, загрузка, нажатие на кнопку, прочее. Всё это можно делать посредством целого ряда счётчиков аналитики или системы работы с тэгами (вроде “GoogleTagManager”).

Вкладка “Точки остановки DOM”

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

Вкладки “Свойства” и “Специальные возможности”

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

Особенности работы маркетолога с консолью разработчика

Данный раздел посвящён лайфхакам, которые позволят использовать консоль для решения маркетинговых задач максимально эффективно.

Лайфхак №1: Отслеживайте вносимые изменения в режиме «онлайн»

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

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

Лайфхак №2: Поиск шрифтов или элементов

Он существенно упрощён в консоли, а необходимость в нём, как правило, возникает при внесении изменений в сайт через систему управления содержимым (CMS). Для этого нужно использовать сочетание клавиш “Ctrl+F”, которая и откроет строку поиска.

Лайфхак №3: Просмотр сайта со смартфона или планшета

Для этого достаточно выбрать определённую иконку, которая находится перед вкладкой “Элементы”.

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

Лайфхак №4: Работаем с куками

В них содержатся сведения о пользователе, которые могут оказывать влияние на отображение сайта. Они доступны для удаления в настройках любого браузера, где, впрочем, для этого пришлось бы искать сайт в довольно длинном перечне… А вот в консоли это можно сделать в разы быстрее: достаточно перейти на вкладку “Приложение”, найти там раздел “Файлы cookie”, открыть его – и выбрать нужный сайт. Удалить куки можно нажав правую клавишу и “Удалить данные”, а потом перезагрузив сайт.

Лайфхак №5: Поиск нужных элементов

Вкладка “Элементы” позволяет настраивать аналитику для сайтов со сложной структурой, если установить на него “GoogleTagManager”. В процессе консоль станет эффективным инструментом для поиска подэлементов, который позволяет отслеживать клики пользователей. Особенно это актуально в плане того, что многие кнопки включают в себя целый ряд вложенных элементов. Консоль позволит выбирать нужные элементы сайта, «разбивать» их на дочерние и ставить каждый из них на отслеживание в “GoogleTagManager”.

Что касается поиска элементов на древе сайта, то его можно осуществить нажав на иконку в левой верхней углу консоли. Будет запущен режим автоматического поиска, при котором элементы, «задеваемые» при движениях курсора по странице, будут выделяться в древе в разделе “Элементы”. В ряде из них будут появляться всплывающие окна, в каждом из которых обозначен класс объекта и его основные свойства.

Ещё один лайфхак заключается в том, чтобы использовать консоль для поиска счётчиков аналитики на сайте. Это актуально в ситуациях, когда с ними возникают проблемы (к примеру: остаются элементы старого счётчика или новый загрузился не до конца). Алгоритм действий – следующий:

1. Перейти в панель “Элементы”;
2. Выбрать “Ctrl+F” и запустить поиск;
3. Ввести в него текст из счётчика;
4. Изучить первый обнаруженный элемент;
5. Если это не то, что нужно, – использовать кнопки «вверх»/«вниз» для дальнейшего поиска.

Лайфхак №6: Отслеживание событий

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

• Сбои доступа аналитических модулей из-за “Adblock”;
• Сложности с загрузкой ряда элементов.

Для того чтобы проверить события web-аналитики (к примеру, отправить цель в виде события в “Yandex.Metrika”), достаточно ввести её код в консоль и нажать «Ввод». В ответ система может выдать ошибку неопределённого счётчика. Это происходит в том случае, если на сайте задан другой счётчик. Желаемый ответ “test” можно получить заменив его на правильный код.

Если же в консоли появился ответ “undefined”, это означает, что пользователь пытается отправить событие срабатывания цели из нового счётчика в старый. Его запись в новых счётчиках выглядит следующим образом: “ym(XXXXX3,’reachGoal’,’test’)” и никак не воспринимается старыми. А вот что касается старых, то объявление событий в них воспринимается одинаково и старыми и новыми счётчиками.

Вышеописанное позволяет отправлять события для “GoogleAnalytics” и “GoogleTagManager”. В последнем случае отслеживание может намного более детальным: в частности, оно позволяет просчитывать целый ряд значений, после чего – отправлять или нет эти результаты. Кроме того, оно может взять первый из обнаруженных пользователем на сайте элементов и отправить его содержимое в базу “GoogleAnalytics”.

Итоги

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