Сетевые запросы: протестируйте свой сайт, заблокировав или ограничив сетевые запросы.

Ewa Gasperowicz

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

Обзор

Вкладка «Условия запроса» позволяет блокировать несколько ресурсов или «шаблонов» одновременно и переключать их из списка. Вы также можете блокировать домены или URL-адреса сетевых запросов из панели «Сеть» , и соответствующие шаблоны появятся во вкладке «Условия запроса» .

Вкладка « Условия запроса» позволяет:

  • Добавить или удалить узоры.
  • Редактировать шаблоны.
  • Удалите все узоры.
  • Включить или отключить блокировку или ограничение сетевых запросов. После включения вы можете переключать блокировку или ограничение для отдельного шаблона.

Закрытие DevTools отключает блокировку и регулирование сетевых запросов. Вам нужно снова открыть панель и включить блокировку. Однако DevTools сохраняет шаблоны даже после закрытия браузера.

Блокировать или ограничивать сетевой запрос

Блокировать сетевые запросы можно на панели «Сеть» в инструментах разработчика.

  1. В панели «Сеть» в разделе «Имя» щелкните правой кнопкой мыши запрос и выберите «Заблокировать запрос» или «Ограничить запрос». изображение
  2. Вкладка «Условия запроса» автоматически открывается и отображает соответствующий шаблон как заблокированный или ограниченный по скорости выполнения. При этом автоматически активируется флажок «Включить блокировку и ограничение скорости выполнения».

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

Чтобы отличить медленные запросы от запросов, которые ограничиваются инструментами разработчика, вы можете проверить панели «Сеть» и «Производительность».

В панели «Сеть»:

  • Заблокированные запросы: проверьте столбец «Статус» . Заблокированные запросы будут отображаться явно (blocked:devtools) и будут выделены красным цветом.
  • Ограниченные запросы: рядом с URL-адресом запроса появится значок золотого или коричневого цвета. Также можно проверить столбец «Время» . Значок появится рядом с указанием времени.
    • Наведите курсор на значок, чтобы увидеть, какое именно сетевое условие было применено.
    • Нажмите на значок, чтобы немедленно открыть панель условий запроса и выделить правило, ответственное за регулирование.

В панели «Инструменты разработчика» отображается информация о заблокированных и ограниченных запросах.

В панели «Производительность»: При записи профиля производительности также можно отслеживать состояние сети. Для этого:

  1. Перейдите в панель «Производительность» и запишите видео.
  2. Найдите запрос в разделе «Сеть».
  3. Наведите курсор на запрос, чтобы увидеть всплывающую подсказку с подробным описанием примененных сетевых условий.

Откройте вкладку «Условия запроса».

Чтобы открыть панель «Условия запроса» :

  1. Откройте инструменты разработчика .
  2. Откройте меню «Команда» , нажав:
    • macOS: Command + Shift + P
    • Windows, Linux, ChromeOS: Control + Shift + P Меню команд с
  3. Начните вводить Request conditions , выберите «Показать условия запроса» и нажмите Enter . В нижней части окна «Инструменты разработчика» отобразится панель «Условия запроса» .

В качестве альтернативы, в правом верхнем углу выберите Дополнительные инструменты > Запрос условий .

Изменение настроек регулирования скорости

Чтобы настроить параметры регулирования скорости:

  1. Откройте вкладку «Условия запроса» и перейдите к конкретному запросу.
  2. В столбце «Регулирование скорости» выберите предустановленный режим (например, «Медленный 3G», «Быстрый 3G») из выпадающего меню. Вы также можете добавить собственный сетевой профиль.

Изменить шаблон запроса

Чтобы изменить шаблон, в панели «Условия запроса » нажмите кнопку « » рядом с шаблоном, отредактируйте его и нажмите «Сохранить» . Вы также можете нажать кнопку «Добавить условие» , чтобы создать новое. При вводе шаблона URL вы можете использовать подстановочные знаки ( * ) для сопоставления динамических частей URL. Например, *://example.com будет соответствовать всем запросам API к этому домену. Вы можете использовать подстановочные знаки для применения условий к нескольким ресурсам одновременно с помощью API шаблонов URL .

Включить/выключить блокировку сетевых запросов

«Включить блокировку и регулирование» позволяет одновременно включать и отключать блокировку сетевых запросов для всех шаблонов.

Переупорядочить шаблоны соответствия URL

Если запрос соответствует нескольким шаблонам, DevTools применяет первое найденное правило. Чтобы управлять приоритетом, нажмите кнопки со стрелками рядом с конкретным правилом в панели «Условия запроса», чтобы переместить правила с высоким приоритетом в начало списка.

Устранение шаблона, блокирующего сетевые запросы

Чтобы удалить из списка определенный шаблон блокировки сетевых запросов:

  • В панели «Условия запроса» нажмите кнопку « » .

Чтобы удалить все шаблоны блокировки сетевых запросов, на панели действий нажмите кнопку Удалить все шаблоны блокировки сети» .