Проверка активности сети в Microsoft Edge DevTools

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

Для просмотра функциональных возможностей используйте ссылку сетевая ссылка .

Когда следует использовать панель "сеть"

В общем случае следует использовать панель "сеть", чтобы убедиться в том, что ресурсы загружаются или загружаются должным образом. Наиболее распространенными вариантами использования панели "сеть" являются:

  • Убедитесь в том, что ресурсы действительно отправляются или загружаются вообще.
  • Проверка свойств отдельного ресурса, например HTTP-заголовков, содержимого, размера и т. д.

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

Открытие панели "сеть"

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

  1. Откройте демонстрацию Приступая к работе .

    Рис. 1

    Демонстрация
    Демонстрация

  2. Откройте DevTools , нажав клавиши Control + Shift + J \ (Windows ) или Command + Option + J \ (macOS ). Откроется панель консоли .

    Рисунок 2

    На консоли
    ! [Консоль] ImagesTutorialConsole

    Вы можете закрепить DevTools в нижней части окна.

    Рисунок3

    DevTools закреплено в нижней части окна
    ! [DevTools закреплен в нижней части окна] ImagesTutorialDocked

  3. Откройте вкладку сеть . Откроется панель Network (сеть).

    Рисунок4

    DevTools закреплено в нижней части окна
    ! [DevTools закреплен в нижней части окна] ImagesTutorialNetwork

Прямо сейчас панель Network (сеть) пуста. DevTools только записывает сетевые активности после того, как вы откроете ее и не произошел никаких сетевых операций после того, как вы открыли DevTools.

Регистрация активности в сети

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

  1. Перезагрузите страницу. На панели Network (сеть) регистрируются все сетевые активности в журнале сети.

    Рисунок 5

    Журнал сети
    ! [Журнал сети] ImagesTutorialLog

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

    Каждый столбец представляет сведения о ресурсе. На рисунке 6 показаны столбцы по умолчанию.

    • Состояние. Код состояния HTTP для ответа.
    • Тип. Тип ресурса.
    • Инициатор. Причина запроса ресурса. При выборе ссылки в столбце инициатора осуществляется переход к исходному коду, вызвавшему запрос.
    • Time (время). Продолжительность запроса.
    • Каскадом. Графическое представление различных стадий запроса.
      Наведите указатель мыши на Каскад, чтобы увидеть разбивку.

    Примечание

    Диаграмма, расположенная над сетевым журналом, называется обзором. Вы не будете использовать граф обзора в этом учебнике, поэтому вы можете скрыть его. Ознакомьтесь со статьей скрыть область "Общие сведения".

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

  3. Теперь нажмите кнопку " получить данные " в демонстрационной версии.

  4. Снова посмотрите на нижнюю часть сетевого журнала . Вы должны увидеть новый ресурс под названием "" getstarted.json . Нажатие кнопки " получить данные " привела к тому, что страница запрашивает этот файл.

    Рисунок6

    Новый ресурс в сетевом журнале
    ! [Новый ресурс в сетевом журнале] ImagesTutorialRuntime

Показать дополнительные сведения

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

  1. Щелкните правой кнопкой мыши заголовок таблицы журнала сети и выберите команду Domain (домен). Теперь отображается домен каждого ресурса.

    Рисунок7

    Включение столбца Domain (домен)
    ! [Включение столбца domain] ImagesTutorialDomain

    Совет

    Просмотр полного URL-адреса ресурса при наведении указателя мыши на ячейку в столбце имя .

Имитация медленных подключений к сети

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

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

    Рисунок8

    Включение регулирования
    ! [Включение регулирования] ImagesTutorialThrottling

  2. Выберите медленное 3G.

    Рисунок9

    Выбор медленной сети 3G
    ! [Выберите медленное 3G] ImagesTutorialSlow3G

  3. Нажмите кнопку Повторная Загрузка  и выберите пустой кэш и нажмите окончательную перезагрузку.

    Рисунок 10

    Пустой кэш и окончательная перезагрузка
    ! [Пустой кэш и окончательная перезагрузка] ImagesTutorialHardReload

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

    Примечание

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

Захват снимков экрана

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

  1. Нажмите кнопку  Параметры сети и установите флажок захватить снимки экрана .

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

    Рисунок11

    Снимки экрана загрузки страницы
    ! [Снимки экрана загруженной страницы] ImagesTutorialAllScreenshots

  3. Выберите первый эскиз. DevTools показывает, какая сетевая активность происходила в данный момент времени.

    Рисунок12

    Сетевая активность, происходящий на первом снимке экрана
    ! [Сетевая активность, происходящие во время первого снимка экрана] ImagesTutorialFirstScreenshot

  4. Снова нажмите кнопку  Параметры сети и снимите флажок захватить снимки экрана , чтобы закрыть область снимки экрана.

  5. Повторно загрузите страницу.

Проверка сведений о ресурсе

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

  1. Выберите getstarted.html . Показана вкладка " заголовки ". Используйте эту вкладку для проверки заголовков HTTP.

    Рисунок13

    Вкладка "заголовки"
    ! [Вкладка Заголовки] [ImagesTutorialHeaders]

  2. Откройте вкладку Предварительный просмотр . Отобразится основной рендеринг HTML-кода.

    Рисунок14

    Вкладка "предварительный просмотр"
    ! [Вкладка "предварительный просмотр"] [ImagesTutorialPreview]

    Эта вкладка полезна, если API возвращает код ошибки в HTML. Возможно, вам будет проще прочитать обработанный HTML, чем исходный HTML-код или просматривает изображения.

  3. Откройте вкладку ответ . Отобразится исходный код HTML.

    Рисунок15

    Вкладка "ответ"
    ! [Вкладка "ответ"] [ImagesTutorialResponse]

    Совет

    Если файл minified, то при нажатии кнопки формат формата  в нижней части вкладки ответа повторно форматирует содержимое файла для чтения.

  4. Откройте вкладку время . Показана сетевая подразделение активности для этого ресурса.

    Рисунок16

    Вкладка время
    ! [Вкладка время] [ImagesTutorialTiming]

  5. Нажмите кнопку Закрыть  , чтобы снова просмотреть журнал сети.

    Рисунок17

    Кнопка "Закрыть"
    ! [Кнопка "Закрыть"] [ImagesTutorialCloseTiming]

Поиск заголовков и ответов в сети

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

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

  1. Выберите Search  Поиск поиска . Область поиска откроется слева от сетевого журнала.

    Рис. 18

    Область "Поиск"
    ! [Область поиска] [ImagesTutorialSearch]

  2. Введите текст Cache-Control и нажмите клавишу Enter . В области поиска перечислены все вхождения Cache-Control , найденные в заголовках или содержимом ресурсов.

    На рисунке 19

    Результаты поиска по запросу Cache-Control
    ! [Результаты поиска для Cache-Control] [ImagesTutorialResults]

  3. Выберите результат, чтобы просмотреть ресурс, в котором был найден результат. Если вы видите сведения о ресурсе, выберите результат, чтобы перейти непосредственно к нему. Например, если запрос был найден в заголовке, откроется вкладка Заголовки. Если запрос найден в содержимом, откроется вкладка ответ .

    Рис. 20

    Результат поиска, выделенный на вкладке "заголовки"
    ! [Результат поиска, выделенный на вкладке Заголовки] [ImagesTutorialCache]

  4. Закройте область поиска и вкладку заголовки.

    Рисунок 21

    Кнопки "Закрыть"
    ! [Кнопки закрытия] [ImagesTutorialCloseButtons]

Фильтрация ресурсов

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

Рис. 22

Панель инструментов "фильтры"
! [Панель инструментов "фильтры"] [ImagesTutorialFilters]

Панель инструментов " фильтры " должна быть включена по умолчанию. Если не так:

  1. Щелкните фильтр фильтра  , чтобы отобразить его.

Фильтрация по строке, регулярному выражению или свойству

Текстовое поле « Фильтр » поддерживает различные типы фильтрации.

  1. Введите png текст в текстовое поле Фильтр . Отображаются только файлы, содержащие текст png . В этом случае только файлы, соответствующие фильтру, являются изображениями в формате PNG.

    Рис. 23

    Строковый фильтр
    ! [Строковый фильтр] [ImagesTutorialPNG]

  2. Введите /.*\.[cj]s+$/. DevTools отфильтровать все ресурсы с именем файла, которое не оканчивается на a, а j c затем с 1 или более s символами.

    Рисунок 24

    Фильтр регулярных выражений
    ! [Фильтр регулярных выражений] [ImagesTutorialRegEx]

  3. Введите -main.css. DevTools отфильтровать main.css . Если какой – либо другой файл соответствует шаблону, он также будет исключен.

    Рис. 25

    Отрицательный фильтр
    ! [Отрицательный фильтр] [ImagesTutorialNegative]

  4. Введите domain:cdn.glitch.com текст в текстовое поле Фильтр . DevTools отфильтровать все ресурсы с URL-адресом, который не соответствует этому домену.

    Рис. 26

    Фильтр свойств
    ! [Фильтр свойств] [ImagesTutorialProperty]

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

  5. Очистите текстовое поле " Фильтр " в любом тексте.

Фильтрация по типу ресурсов

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

  1. Выберите CSS. Все остальные типы файлов будут отфильтрованы.

    На рисунке 27

    Отображение только CSS файлов
    ! [Показывать только файлы CSS] [ImagesTutorialCSS]

  2. Чтобы также просмотреть сценарии, удерживайте клавишу Control \ (Windows ) или Command \ (macOS ), а затем выберите JS.

    Рис. 28

    Отображение только файлов CSS и JS
    ! [Показывать только файлы CSS и JS] [ImagesTutorialCSSJS]

  3. Нажмите кнопку все , чтобы удалить фильтры и снова просмотреть все ресурсы.

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

Блокировать запросы

Как выглядит и работает страница при недоступности некоторых ресурсов страницы? Не удается полностью завершить его или он по-прежнему работает? Блокировка запросов на определение:

  1. Control + Shift + P Чтобы открыть меню команд, нажмите клавиши \ (Windows ) или Command + Shift + P \ ( Command MenumacOS ).

    Рис. 29

    Меню команд
    ! [Меню команд] [ImagesTutorialCommandMenu]

  2. Введите block команду Показать блокировку запросови нажмите кнопку Enter .

    Рис. 30

    Показать блокировку запросов
    ! [Показать блокировку запросов] [ImagesTutorialBlock]

  3. Нажмите кнопку Добавить шаблон  Добавить узор .

  4. Введите main.css.

    На рисунке 31

    Снижающи main.css
    ! [Блокировка Main. CSS] [ImagesTutorialAddBlock]

  5. Нажмите кнопку Добавить.

  6. Перезагрузите страницу. Как и предполагалось, стиль страницы немного изменился, так как основная таблица стилей заблокирована.

    Примечание

    main.cssСтрока в сетевом журнале. Красный текст означает, что ресурс заблокирован.

    Рисунок 32

    main.css заблокирован
    ! [Main. CSS заблокирована] [ImagesTutorialBlockedStyles]

  7. Снимите флажок включить блокировку запросов .

Заключение

Поздравляем, вы завершили обучение. Теперь вы знаете, как использовать панель "сеть" в Microsoft Edge DevTools!

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

[ImagesTutorialHeaders]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Resources-Headers.MSFT.png "Рисунок 13: вкладка" заголовки "
[ImagesTutorialPreview]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Resources-Preview.MSFT.png "Рисунок 14: вкладка" предварительный просмотр "
[ImagesTutorialResponse]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Resources-Response.MSFT.png "Рисунок 15: вкладка" ответ ""
[ImagesTutorialTiming]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Resources-Timing.MSFT.png "Рисунок 16: вкладка" время "
[ImagesTutorialCloseTiming]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Resources-Close-tabs.MSFT.png "Рисунок 17: кнопка" Закрыть "
[ImagesTutorialSearch]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Search-Empty.MSFT.png "Рисунок 18: область поиска"
[ImagesTutorialResults]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Search-Cache-Control.MSFT.png "Рисунок 19: результаты поиска для Cache-Control"
[ImagesTutorialCache]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Search-Cache-Control-Headers-Response-Headers.MSFT.png "Рисунок 20: результат поиска, выделенный на вкладке" заголовки "
[ImagesTutorialCloseButtons]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Search-Close.MSFT.png "Рисунок 21: кнопки" Закрыть "
[ImagesTutorialFilters]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-Empty.MSFT.png "рис. 22: панель инструментов" фильтры "
[ImagesTutorialPNG]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-PNG.MSFT.png "Рисунок 23: строковый фильтр"
[ImagesTutorialRegEx]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-Regex.MSFT.png "Рисунок 24: фильтр регулярных выражений"
[ImagesTutorialNegative]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-Negative-Statement.MSFT.png "Рисунок 25: отрицательный фильтр"
[ImagesTutorialProperty]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-property-value.MSFT.png "Рисунок 26: фильтр по свойству"
[ImagesTutorialCSS]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-File-Type-CSS.MSFT.png "Рисунок 27: показывать только файлы CSS"
[ImagesTutorialCSSJS]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-Filter-File-Type-CSS-JS.MSFT.png "Рисунок 28: отображение только файлов CSS и JS"
[ImagesTutorialCommandMenu]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-CLI-Empty.MSFT.png "Рисунок 29: меню команд"
[ImagesTutorialBlock]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-CLI-Block.MSFT.png "рис. 30: Показать блокировку запросов"
[ImagesTutorialAddBlock]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-CLI-Block-Add-pattern.MSFT.png "Рисунок 31: Блокировка Main. CSS"
[ImagesTutorialBlockedStyles]:/Microsoft-Edge/Devtools-Guide-Chromium/Media/Network-Glitch-Network-CLI-Block-Main-CSS.MSFT.png "Рисунок 32: Main. CSS заблокирован"

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

Лицензия Creative Commons
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.