Инструменты разработчика Chrome позволяют оперативно анализировать содержание и ресурсы веб-страницы прямо при ее просмотре. В частности, так вы можете проверять теги Менеджера кампаний 360.
Как перейти к Инструментам разработчика
Чтобы открыть Инструменты разработчика в Chrome, выполните одно из следующих действий:
- Нажмите правой кнопкой мыши в любом месте страницы и выберите Просмотр кода страницы. Откроется окно с HTML-кодом элемента, на который вы нажимали.
- В верхней части окна браузера нажмите Просмотр > Разработчикам > Инструменты разработчика.
Подробнее об инструментах разработчика в Chrome…
Какие вкладки вам доступны и как с ними работать
-
Вкладка "Элементы". На ней отдельно показаны как исходный HTML-код страницы, так и его отрисованная версия. Любые элементы HTML, созданные или измененные с помощью JavaScript при загрузке страницы, будут отражены в окне с отрисованным HTML-кодом. Исходный код при этом останется без изменений.
Примеры использования- Поиск измененных тегов. С помощью этой вкладки можно находить внедренные на страницу теги Floodlight и теги мест размещения и проверять, не вносились ли в них изменения. Рекомендуется искать их по слову double, поскольку URL в тегах мест размещения Менеджера кампаний 360 содержат сочетание символов doubleclick (название домена). Обнаружив тег, сравните его с тегом, экспортируемым из пользовательского интерфейса в разделе "Управление трафиком".
- Устранение неполадок с CSS. На вкладке "Элементы" справа приведены различные атрибуты CSS, которые определяют, как и где будет отображаться выбранный элемент HTML.
- В разделе "Вычисленные" показаны все правила CSS, которые применяются к выбранному элементу (независимо от того, заданы ли они в коде CSS администратором сайта или обусловлены стандартными настройками браузера для элементов HTML такого типа).
- В разделе "Стили" показаны только те правила CSS, которые задал администратор сайта. Каждый подраздел соответствует тому участку в коде страницы, в котором находится правило CSS, применяемое к выбранному элементу HTML. Если вы нашли правило, которое вызывает сбои на странице, то нажмите на ссылку в правом верхнем углу текущего подраздела, чтобы загрузить строку или документ, которые содержат это правило.
Вкладка "Элементы" особенно удобна тем, что в ней можно изменять проверяемый код. Если вы считаете, что обнаружили строку в коде HTML или правило CSS, которые вызывают неполадки на странице, то можете просто изменить код, чтобы проверить свое предположение. Эти изменения коснутся только того экземпляра страницы, который сохранен во временных файлах вашего браузера. После перезагрузки страницы они исчезнут. А если ее откроет другой пользователь, они не будут видны. -
Вкладка "Источники" позволяет проверить таблицу различных ресурсов, которые были загружены вместе с рассматриваемой страницей. К их числу относятся изображения, документы HTML, файлы JavaScript и многое другое.
Примеры использованияПоиск тегов, не записанных на странице. На вкладке "Элементы" можно посмотреть конечный HTML-код страницы, но для того, чтобы начали работать теги мест размещения, обычно недостаточно записать код на страницу. На вкладке "Источники" вы также можете редактировать и отлаживать файлы JavaScript.
Совет. Панель Поиск позволит вам без труда найти внедренный на страницу тег среди всех загруженных ресурсов. В правом верхнем углу окна инструментов разработчика нажмите на значок с тремя точкамии выберите Другие инструменты > Поиск.
-
Вкладка "Сеть" – это встроенный прокси-анализатор, который позволяет отслеживать HTTP-трафик страницы во время и после ее загрузки.
Примеры использования- Проверка срабатывания тегов Floodlight и тегов мест размещения. Прокси-анализатор – незаменимый инструмент проверки и устранения неполадок. Если тег не срабатывает, то он не может отслеживать или возвращать содержимое креативов так, как это было задумано. Аналогично, если вызов отправлен корректно (без нарушений синтаксиса и в правильном формате), он будет принят нашим сервером независимо от того, как внедрен тег (правда, при этом может учитываться характер содержания страницы). Используйте вкладку "Сеть", чтобы определить, сработал или нет тег места размещения или тег Floodlight. Если да, то убедитесь, что синтаксис вызова соответствует тому URL, который содержится в неизмененной версии тега.
- Проверка времени ожидания. Помимо проверки вызова, на вкладке "Сеть" можно увидеть, сколько времени понадобилось, чтобы получить ответ на тот или иной запрос. Это удобно при проверке времени реакции, особенно если вы работаете с динамическими тегами Floodlight. Если Floodlight вызывает слишком большую задержку при загрузке страницы, попробуйте установить причину этого, отслеживая вызовы от пикселей-посредников. Маловероятно, что эта задержка вызвана самим тегом Floodlight. Скорее всего, она связана с одним из пикселей-посредников в теге.
-
Вкладка "Производительность" показывает хронологию трафика HTTP и загрузки памяти. Как и раздел "Сеть", она позволяет выявить причины задержки. Это единственная задача, которую эта вкладка позволяет решать при работе с Менеджером кампаний 360.
-
Вкладка "Память" — это инструмент, который веб-разработчики могут использовать для оптимизации загрузки ЦП в веб-приложениях. Эта вкладка не применима для решения проблем, связанных с Менеджером кампаний 360.
-
Вкладка Lighthouse позволяет анализировать загрузку страниц и предлагать варианты их оптимизации для уменьшения времени загрузки и улучшения кажущейся (и действительной) реакции. Эта вкладка не применима для решения проблем, связанных с Менеджером кампаний 360.
-
Вкладка "Консоль" автоматически находит ошибки в коде страницы. После того как с помощью вкладки "Сеть" вы определили, что тег не срабатывает, вкладка "Консоль" поможет вам понять, почему это происходит.
Примеры использованияИсправление синтаксических ошибок. Если тег не срабатывает, воспользуйтесь вкладкой "Консоль": на ней могут быть указаны ошибки, обнаруженные алгоритмами Chrome. Вот на какие из ошибок нужно обратить внимание:
- NS_IMAGELIB. Эта ошибка может возникнуть, если URL с параметром src в окне iframe относится к изображению. В этом случае тег места размещения или тег Floodlight может не сработать должным образом (при этом алгоритмы Floodlight могут засчитать конверсию даже в случае ошибки). Тем не менее, если эта ошибка произошла в теге Floodlight, то не сработает ни один из сторонних пикселей, которые в нем используются.
- Unsafe JavaScript attempt to access frame with URL ("Небезопасная попытка JavaScript получить доступ к фрейму в URL"). Это сообщение системы безопасности можно проигнорировать, поскольку оно просто предупреждает о встраивании на страницу тегов iframe из других доменов. Такое сообщение появится только у пользователей, выбравших очень высокий уровень безопасности. Но оно никак не повлияет на работу тегов Floodlight или совмещенных пикселей.
- Resource interpreted as '_blank_' but transferred with MIME type " ." ("Ресурс интерпретирован как _blank_, но передан с типом MIME "."). Это сообщение указывает на проблему с форматом файла. MIME является идентификатором формата файлов в Интернете. Эта ошибка может произойти, если ресурс загружается с неправильным расширением имени файла (например, если файл формата JPEG имеет расширение .gif).
- Uncaught TypeError ("Необработанная ошибка TypeError"). Это сообщение о том, что в одном из элементов HTML на странице произошла ошибка TypeError. Как правило, причиной является некорректный код одной из функций JavaScript.
- Uncaught SyntaxError ("Необработанная ошибка SyntaxError"). Это сообщение о том, что в одном из элементов HTML на странице есть синтаксическая ошибка. Например, в коде присутствует лишний или неправильно используемый символ (<"/-*^#).
Вкладка "Консоль" удобна ещё и тем, что любое сообщение об ошибке в ней связано со строкой и документом, которые стали ее причиной. Это позволяет сразу найти фрагмент кода, который нужно изменить. Однако полностью полагаться на эту функцию нельзя. Она выявляет ошибки достаточно надежно, но строка, в которой эта ошибка находится, может быть указана неточно.
