Перейти к основному содержимому

Окно трафика

🔗 Оригинальная страница — Источник данного материала


Описание

В окно трафика попадают все запросы которые делает браузер ProjectMaker’а.

Вид окна трафика после перехода на https://lessons.zennolab.com/ru/advanced

Сюда так же попадут и запросы сделанные с помощью экшенов:


Принцип работы

Включение

В верхнем меню ищем Окно → выбираем Трафик.

image-20200811-082058

Что делать если окно не отображается

Бывают случаи, когда окно трафика не отображается, хоть возле него в настройках и стоит чекбокс (как показано на скриншоте выше), говорящий о том, что оно включено. Если после нескольких попыток включить окно, оно так и не появилось, то можно произвести общий сброс настроек окон в ProjectMaker.

Эти действия приведут к сбросу настроек окон.

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

Заходим в Редактирование → Настройки → Отладка → и в самом низу окна ищем кнопку Сбросить панели. После нажатия данной кнопки и перезагрузки ProjectMaker все настройки окон будут сброшены.

image-20200808-071052

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


Внешний вид окна

image-20210607-135243

Содержит следующие колонки:

  • Статус ответа (может быть 200, 403, 404, 407, 503 и др.)
  • Метод запроса (GET-запрос, POST-запрос, PUT, DELETE и др.)
  • URL по которому был запрос
  • Прокси (если использовался)
  • Время - в миллисекундах (ms), затраченное на запрос
Список сделанных запросов
image-20210607-135422

Настройки политики содержимого

Этот пункт описан ниже в статье.

image-20210607-135515

Сгруппировать по домену

image-20210607-135548

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

Для каждого поддомена создаётся собственная вкладка

image-20210608-115211

Панель поиска

image-20210607-135717

Можно использовать в паре с Группировкой.

На скриншоте показан пример поиска загруженных JavaScript файлов для домена http://yandex.ru

image-20200810-152031

Сортировка по умолчанию

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

image-20210607-135916

А опция Сортировка по умолчанию позволяет восстановить исходный порядок запросов - по времени их отправки.

Автопрокрутка

image-20210607-140037

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

Очистка

image-20210607-140058

Удаляет все запросы из окна.

Включение/отключение колонок

Если кликнуть ПКМ по любому заголовку то появится контекстное меню в котором можно включить/выключить отображаемые колонки

image-20200811-083606


Подробная информация о запросе

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

Заголовки

image-20200811-083835

Эта вкладка содержит основную информацию по запросу:

  • URL
  • Метод
  • Статус ответа
  • Прокси (если использовался)
  • Заголовки запроса и ответа

Куки

image-20200811-083955

Отправленные и полученные куки

Параметры

image-20200811-084451

Параметры отправленные в запросе:

  • Строка запроса.
    Тут отображаются параметры, которые отправлены как часть URL.

На скриншоте — https://httpbin.org/post?urlparam1=val1&urlparam2=ProjectMaker

  • Данные запроса.
    Параметры отправленные в теле запроса.

Ответ

image-20200811-085717

На скриншоте показан ответ сервера после POST запроса на https://httpbin.org/post.


Для чего нужно видеть трафик?

  • Анализ сделанных браузером запросов;
  • Составление собственных запросов;
  • Блокировка нежелательных запросов (с использованием белых или черных списков).

Контекстное меню запроса

Кликнув ПКМ по любому запросу в окне трафика появится контекстное меню с дополнительными возможностями.

Копирование данных запроса

image-20200811-085937

С лёгкостью можно скопировать URL запроса, заголовки (как запроса так и ответа) и ответ от сервера.

Автоматическое создание запросов

image-20200811-090043

ProjectMaker автоматически создаст экшен с необходимым типом запроса. Подставит заголовки, параметры, прокси (если использовался).

Рекомендуем вручную проверить данные, которые попали в экшен.

Белый и чёрный списки

С помощью Политики содержимого можно запрещать\разрешать PorjectMaker загружать определённые домены, URL.

Для этого так же можно использовать Регулярные выражения.

Существует три возможных состояния:

image-20200812-142258

  • Без ограничений — будут загружены все адреса без исключений.
  • Белый список — загружаться смогут только те домены и адреса, которые вы тут укажете.
  • Чёрный список — доступ будет у всех адресов, кроме тех, что находятся в этом списке.
Одновременно можно использовать либо чёрный, либо белый список.

Для чего это может понадобится?

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

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


Как это работает?

Существует несколько способов включения чёрного и белого списков.

Способ №1 (самый простой)

Клик ПКМ в Окне трафика по необходимому запросу. Затем добавление домена или адреса из этого запроса в один из списков.

image-20200811-090145

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

Режим будет зависеть от того, в какой список вы добавили домен.

Добавленные таким образом элементы затем можно отредактировать вручную в самом экшене.

Способ №2 (через контекстное меню)

Добавить действие → Браузер → Настройки
image-20200812-152846

Затем в настройках экшена (в выпадающем меню) ищем Политика содержимого

image-20200812-153033

1. Выбор режима работы.
2. Адрес для фильтрации (домен или регулярное выражение)
3. Режим обработки для указанного адреса
4. С помощью данной кнопки можно удалить условие
Альтернативный вариант: выделить нужное условие и нажать клавишу DELETE на клавиатуре

image-20200812-153600

Способ №3 (через Окно профиля)

1. Сначала кликаем по иконке Профиль в главном окне ProjectMaker
2. Откроется окно Текущий профиль → в нём открываем вкладку Браузер
3. В нижней части данной вкладки надо активировать Содержимое.
Тут можно в ручном режиме добавить новые условия для фильтрации запросов.

image-20200812-162721


Добавление нового правила

Начиная с версии 7.1.6.0 в стандартной теме оформления (Интерфейс - Light, Редактор - Modern2) может быть не совсем очевидным, как добавлять новые правила в ручном режиме. Это касается как метода через профиль, так и через экшен.

Сразу после добавления экшена и выбора одного из режимов (Белый/Чёрный список) будет выделена верхняя строка.

image-20200812-163630

После добавления нового условия и выбора типа обработки курсор не переходит на новую строку, и не появляется кнопка Добавить.

image-20200812-163752

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

image-20200812-164110

Вот так это работает наглядно
76T4GCMyua

Пример использования

Рассмотрим пример на основе форума https://zennolab.com/discussion/

Открыв окно трафика и совершив переход по вышеуказанному URL, вы увидите большое количество запросов, которые делает браузер. Например, к VK, Facebook, Yandex, Google, CloudFlare и другим ресурсам.

На скриншоте отображена лишь малая часть запросов.
Здесь отображена лишь малая часть запросов.

Представим, что вы хотите запретить запросы к VK, Facebook и Yandex. Дополнительно вам требуется запретить загрузку адресов в которых встречается слово analytics (в любом месте URL'а).

Вот как может выглядеть экшен Политика содержимого для выполнения вышепоставленных задач:

image-20200812-173638

А вот так будет выглядеть Окно трафика после применения правил со скриншота выше и повторного захода на https://zennolab.com/discussion/

image-20200812-173923


Полезные ссылки