Справочник по сетевым функциям

Средство "Сеть" имеет следующие функции для проверки сетевой активности на веб-странице.

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

Подробное содержание:

• Запись сетевых запросов
  • Остановка записи сетевых запросов
  • Очистить запросы
  • Сохранение запросов при загрузке страниц
  • Запись снимков экрана во время загрузки страницы
  • Повторная отправка запроса
  • Изменение и повторная отправка запроса в виде вызова удаленного доступа
• Изменить поведение при загрузке
  • Эмуляция нового посетителя путем отключения кэша браузера
    • Отключите кэш браузера в средстве "Состояние сети"
  • Очистка кэша браузера вручную
  • Эмуляция в автономном режиме
  • Эмуляция медленных сетевых подключений
    • Создание настраиваемого профиля регулирования
    • Регулирование подключений WebSocket
    • Эмуляция медленных сетевых подключений с помощью средства "Состояние сети"
  • Очистка файлов cookie браузера вручную
  • Переопределение заголовков HTTP-отклика
  • Переопределение агента пользователя
• Задание агента пользователя подсказки для клиента
• Запросы поиска
• Фильтрация запросов
  • Фильтрация запросов по свойствам
  • Фильтрация запросов по типу
  • Фильтрация запросов по времени
  • Скрытие URL-адресов данных
  • Скрытие URL-адресов расширений
  • Показывать только запросы с заблокированными файлами cookie ответа
  • Показать только заблокированные запросы
  • Показывать только сторонние запросы
• Сортировка запросов
  • Сортировка по столбцам
  • Сортировать по этапу активности
• Анализ запросов
  • Отображение журнала запросов
    • Добавление и удаление столбцов
    • Добавление настраиваемых столбцов для заголовков ответов
  • Группировка запросов по встроенным фреймам
  • Отображение отношения времени запросов
  • Анализ сообщений WebSocket-соединения
  • Анализ событий в потоке
  • Предварительный просмотр текста ответа
  • Вывод текста ответа
  • Отображение заголовков HTTP
    • Просмотр источника заголовков HTTP
    • Предупреждение о предварительных заголовках
  • Просмотр полезных данных запроса (параметры строки запроса и данные формы)
    • Просмотр источника полезных данных
    • Отображение параметров строки запроса с кодированным URL-адресом
  • Отображение файлов cookie
  • Отображение временной разбивки запроса
    • Предварительный просмотр временной разбивки
    • Объяснение этапов разбивки времени
    • Анализ маршрутизации запроса служебного сценария
  • Отображение инициаторов и зависимостей
  • Отображение событий загрузки
  • Отображение общего количества запросов
  • Отображение общего размера скачиваемых файлов
  • Отображение трассировки стека, вызвавшей запрос
  • Отображение несжатого размера ресурса
• Экспорт данных запросов
  • Сохранение всех сетевых запросов в HAR-файле
  • Импорт файла HAR в средства разработчика для анализа
  • Копирование сетевых запросов в буфер обмена
  • Скопируйте отформатированный ответ JSON в буфер обмена
  • Копирование значений свойств из сетевых запросов в буфер обмена
• Изменение макета средства "Сеть"
  • Скрытие области фильтров
  • Использование больших строк запроса
  • Скрытие области "Обзор"
• См. также

Запись сетевых запросов

По умолчанию средства разработчика записывают все сетевые запросы в средстве "Сеть ", если средства разработчика открыты.

Например, вы можете:

1. Перейдите на веб-страницу, например на демонстрационную страницу проверки сетевой активности , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

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

Остановка записи сетевых запросов

Остановка записи запросов:

1. В средстве Сеть нажмите кнопку Остановить запись сетевого журнала (). Он становится серым, указывая на то, что средства разработчика больше не записывают запросы.

2. Нажмите клавиши CTRL+E (Windows, Linux) или COMMAND+E (macOS), когда средство "Сеть" находится в фокусе.

Очистить запросы

Чтобы очистить все запросы из таблицы Запросы , в средстве Сеть нажмите кнопку Очистить сетевой журнал ():

Либо нажмите клавиши CTRL+L (Windows, Linux, macOS) или COMMAND+K (macOS), когда средство "Сеть" находится в фокусе.

См. также:

• Приложение TODO

Сохранение запросов при загрузке страниц

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

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

См. также:

• Приложение TODO

Запись снимков экрана во время загрузки страницы

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

Чтобы включить снимки экрана:

1. Перейдите на веб-страницу, например в приложение TODO, в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика откройте средство "Сеть ".

4. В правом верхнем углу окна Сеть щелкните значок Параметры сети (шестеренка). Появится ряд флажков.

5. Установите флажок "Запись снимков экрана".

   

Чтобы сделать снимок экрана:

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

   Взаимодействовать со снимками экрана можно следующим образом.

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

   

3. Щелкните эскиз снимка экрана, чтобы отфильтровать запросы, выполненные после того, как он был сделан.

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

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

Повторная отправка запроса

Чтобы снова отправить сетевой запрос без перезагрузки веб-страницы, используйте команду Повторно отправить в таблице "Запросы" средства "Сеть".

Команда "Повторно отправить " доступна для следующих типов запросов:

• XHR
• Удаленный доступ
• JavaScript
• CSS
• изображение
• мультимедиа
• font
• WebAssembly
• manifest
• текстовая дорожка
• исходная карта

Чтобы отправить запрос повторно:

1. Перейдите на веб-страницу, например в демонстрацию средства "Сеть", в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы" средства "Сеть" отображаются строки для:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. На демонстрационной веб-странице нажмите кнопку Отправить запрос XHR .

   В таблицу "Запросы" средства "Сеть" добавлена строкаdata.json. В столбце "Инициатор " указано script.js:20.

6. В таблице "Запросы " щелкните запрос правой кнопкой мыши data.json и выберите команду "Отправить повторно".

   Или выберите запрос и нажмите клавишу R.

   В таблице "Запросы" средства "Сеть" добавляется вторая data.json строка. В столбце "Инициатор " указано "Другое":

   

Сведения об инициаторах см. в разделе:

• Укажите инициаторов и зависимости ниже.
• Регистрация сетевой активности в средстве проверки сетевой активности.

Средства разработчика пересылают запросы XHR как XHR. DevTools преобразует другие поддерживаемые типы запросов в запросы Fetch перед их отправкой.

После нажатия кнопки Отправить запрос XHR в демонстрации (которая заставляет JavaScript отправить запрос) в контекстном > меню Копировать запросы Копировать трассировку стека появляется пункт меню Копировать трассировку стека. См. раздел "Копирование сетевых запросов в буфер обмена" ниже.

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

Чтобы изменить сетевой запрос перед его повторной отправкой, используйте команду Изменить и повторно отправить как полученный в таблице Запросы средства "Сеть". Эта команда заставляет средства разработчика скопировать сетевой запрос в качестве fetch() вызова в средство "Консоль ", где его можно изменить и отправить.

Команда "Изменить и повторно отправить как полученный" доступна для следующих типов запросов:

• XHR
• Удаленный доступ
• JavaScript
• CSS
• изображение
• мультимедиа
• font
• WebAssembly
• manifest
• текстовая дорожка
• исходная карта
• document
• Предварительная выборка
• Запросы проверки связи

В отличие от команды Resend, которая пересылает запрос XHR как XHR, команды Edit и Resend as fetch преобразуют XHR и все другие поддерживаемые типы запросов в fetch() вызовы.

В необязательном столбце контекста выполнения в таблице "Запросы " показан контекст выполнения, из которого был отправлен каждый запрос.

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

1. Перейдите на веб-страницу, например в демонстрацию средства "Сеть", в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы" средства "Сеть" отображаются строки для:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. На демонстрационной веб-странице нажмите кнопку Отправить запрос XHR .

   В таблицу "Запросы" средства "Сеть" добавлена строкаdata.json.

6. В таблице "Запросы " щелкните правой кнопкой мыши запрос, который требуется изменить, например запрос, data.json а затем выберите "Изменить и повторно отправить как полученный".

   Средство "Консоль" открывается в консоли в нижней части средств разработчика.

   Редактируемый fetch() вызов, воспроизводящий запрос, добавляется в приглашение консоли . Созданный код включает комментарии, которые идентифицируют исходный запрос и контекст его выполнения.

   Над сгенерированным кодом появляется сообщение " Пересылаемая копия запроса GET data.json", содержит ссылку () на исходный запрос в средстве " Сеть ":

   

   Примечание. В запросе консоли может находиться только один запрос в ожидании одновременно. При выборе параметра "Изменить и повторно отправить как полученный для другого запроса" новый fetch() вызов заменит текущее приглашение консоли без отображения предупреждения.

7. Если созданный комментарий указывает вам на выбор контекста выполнения, используйте раскрывающийся список контекста JavaScript на панели инструментов консоли , чтобы выбрать контекст выполнения (например, top), в котором сетевой запрос повторно отправляется как вызов удаленного доступа.

8. Изменение URL-адреса, метода, заголовков или текста в созданном fetch() вызове.

   Некоторые заголовки запросов, настройки которых запрещены для вызова fetch() , сохраняются в виде информационных комментариев.

9. Нажмите клавишу ВВОД, чтобы отправить измененный запрос.

Новый запрос отображается в таблице "Запросы" средства "Сеть". Значок терминала в столбце "Имя " указывает, что запрос исходит от консоли.

Изменить поведение при загрузке

Эмуляция нового посетителя путем отключения кэша браузера

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

Флажок "Отключить кэширование ":

Отключите кэш браузера в средстве "Состояние сети"

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

1. В средстве Сеть нажмите кнопку Дополнительные условия сети (). Средство " Состояние сети " открывается на панели быстрого просмотра в нижней части средств разработчика.

2. В средстве " Состояние сети " установите флажок "Отключить кэш ":

   

См. также:

• Средство "Состояние сети"

Очистка кэша браузера вручную

Чтобы вручную очистить кэш браузера в любое время, щелкните правой кнопкой мыши в любом месте таблицы «Запросы » и выберите команду «Очистить кэш браузера»:

См. также:

• Приложение TODO

Эмуляция в автономном режиме

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

Чтобы имитировать работу в автономном режиме, выберите раскрывающееся меню >"Нет регулирования" Предустановки>отключены.

Раскрывающееся меню "Автономный режим":

Эмуляция медленных сетевых подключений

Для эмуляции быстрого 4G, медленного 4G или 3G выберите соответствующую предустановку в раскрывающемся меню регулирования на панели действий вверху:

Можно выбрать один из различных шаблонов настроек, например:

• Быстрый 4G
• Медленный 4G
• 3G
• Offline

Чтобы добавить собственные пользовательские стили, щелкните меню регулирования и выберите "Настраиваемое>добавление".

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

См. также:

• Имитация медленного сетевого подключения в разделе "Проверка сетевой активности".
• Приложение TODO

Создание настраиваемого профиля регулирования

В дополнение к предустановкам, таким как медленная или быстрая 4G, вы также можете добавить свои собственные профили регулирования.

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

1. Перейдите на веб-страницу, например на демонстрационную страницу проверки сетевой активности , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. Выберите инструмент "Сеть ".

4. В меню "Регулирование " в разделе "Настраиваемые " выберите "Добавить".

   Или выберите Настройка и управлениерегулированием параметров> средств разработчика.>

   Откроется страница параметров средств разработчика с выбранной страницей "Регулирование ".

5. В разделе Профили сетевого регулирования нажмите кнопку Добавить профиль .

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

6. В текстовом поле Profile Name (Имя профиля) введите 10 кбит/с.

7. В текстовом поле "Скачать " введите 10 (для 10 кбит/с).

8. В текстовом поле "Добавить " введите 10 (для 10 кбит/с).

9. В текстовом поле Задержка введите 10 (для 10 мс).

10. В текстовом поле Packet Loss (Потеря пакетов ) введите 1 (для значения 1%).

11. В текстовом поле " Длина очереди пакетов " введите значение 10.

12. Установите флажок Packet Reordering (Переупорядочение пакетов ):

    

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

    Отображается пользовательский профиль регулирования:

    

14. В области параметров нажмите кнопку "Закрыть" (X).

15. Выберите инструмент "Сеть ".

16. В раскрывающемся меню "Регулирование " в разделе "Настраиваемые " выберите настраиваемый профиль регулирования, например 10 КБ/с:

    

    На вкладке "Сеть" отображается значок предупреждения (), напоминающий о том, что регулирование включено.

См. также:

• Настройте пользовательский профиль регулирования сети в разделе "Регулирование".

Регулирование подключений WebSocket

В дополнение к HTTP-запросам средства разработчика могут регулировать соединения WebSocket. Мы будем использовать медленный настраиваемый профиль регулирования, созданный в предыдущем разделе, чтобы показать эффект регулирования WebSocket-соединения на вашей веб-странице.

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

1. Выполните действия, описанные в предыдущем разделе "Создание настраиваемого профиля регулирования".

2. Переход на страницу, использующую WebSockets, например Online WebSocket Tester, в новом окне или вкладке.

3. На странице установите подключение WebSocket.

   Если вы используете веб-страницу Online WebSocket Tester , нажмите кнопку "Подключиться ".

   Если вы не создадите учетную запись PieSocket для получения маркера API, на веб-странице появится сообщение "Подключение установлено - {"error":"Unknown api key"}".

   Если вы создаете учетную запись PieSocket для получения токена API, на веб-странице просто отображается сообщение "Подключение установлено".

4. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

5. В средствах разработчика в средстве " Сеть " в раскрывающемся меню "Регулирование " выберите "Пользовательские>10 кбит/с".

   Этот параметр был создан в предыдущем разделе "Создание настраиваемого профиля регулирования".

6. На веб-странице "Средство тестирования веб-сокетов " в текстовом поле сообщения удалите средства разработчика без регулирования и введите средства разработчика с регулированием.

7. На веб-странице Online WebSocket Tester нажмите кнопку Отправить .

   В консоли на веб-странице средства тестирования веб-сокетов в Интернете отображаются средства разработчика с регулированием.

8. В верхней части средства " Сеть " нажмите кнопку "Фильтр сокетов " (показано ниже).

9. В таблице щелкните имя подключения, например channel_123?api_key=....

   Отобразятся вкладки.

10. Откройте вкладку "Сообщения " (показано ниже).

    Будут отображаться сообщения WebSocket, отправленные между клиентом и сервером.

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

Эмуляция медленных сетевых подключений с помощью средства "Состояние сети"

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

1. В средстве Сеть нажмите кнопку Дополнительные условия сети ( Средство " Состояние сети " открывается на панели быстрого просмотра в нижней части средств разработчика.

2. В средстве " Состояние сети " в меню " Регулирование сети " выберите скорость подключения.

См. также:

• Средство "Состояние сети"

Очистка файлов cookie браузера вручную

Чтобы вручную удалить файлы cookie браузера в любое время, щелкните правой кнопкой мыши в любом месте таблицы "Запросы " и выберите команду "Очистить файлы cookie браузера".

Переопределение заголовков HTTP-отклика

См. также:

• Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка "Переопределения")
• Переопределение файлов и заголовков HTTP-отклика в разделе Переопределение локального переопределения веб-содержимого и заголовков HTTP-отклика.

Переопределение агента пользователя

Чтобы вручную переопределить агент пользователя:

1. В средстве Сеть нажмите кнопку Дополнительные условия сети ( Средство " Состояние сети " открывается на панели быстрого просмотра в нижней части средств разработчика.

2. В средстве "Состояние сети " снимите флажок "Использовать браузер по умолчанию ". Станут доступны другие элементы управления.

3. Выберите параметр агента пользователя в меню или введите настраиваемый агент пользователя в текстовое поле.

Задание агента пользователя подсказки для клиента

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

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

1. В средстве Сеть нажмите кнопку Дополнительные условия сети ( Средство " Состояние сети " открывается на панели быстрого просмотра в нижней части средств разработчика.

2. В разделе Агент пользователя снимите флажок Использовать браузер по умолчанию , а затем разверните Подсказки агента пользователя для клиента:

   

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

4. Для любого варианта (предопределенного или настраиваемого) укажите подсказки клиента агента пользователя следующим образом:

   • Торговая марка и версия , например Microsoft Edge и 92. Чтобы добавить несколько пар "бренд/версия", нажмите "+ Добавить бренд".
   • Полная версия браузера , например 92.0.1111.0.
   • Платформа и версия , например Windows и 10.0.
   • Архитектура , например x86.
   • Модель устройства , например Galaxy Nexus.

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

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

6. Чтобы проверить изменения, нажмите «Консоль» и введите navigator.userAgentData. Разверните результаты, необходимые для просмотра изменений данных агента пользователя.

См. также:

• Подсказки агента пользователя для клиента при обнаружении Microsoft Edge с вашего веб-сайта.

Запросы поиска

Для поиска по заголовкам запросов, полезным данным и ответам:

1. В средстве "Сеть " нажмите кнопку "Поиск " ("). Или нажмите клавиши CTRL+F (Windows, Linux) или COMMAND+F (macOS).

   В левой части средства "Сеть" откроется вкладка "Поиск".

2. В текстовом поле "Поиск " введите строку запроса и нажмите клавишу ВВОД.

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

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

Чтобы обновить результаты поиска, на вкладке "Поиск " нажмите кнопку "Обновить " ().

Чтобы очистить результаты поиска, на вкладке "Поиск " нажмите кнопку "Очистить поиск " (").

Дополнительные сведения обо всех способах поиска в средствах разработчика см. в статье Поиск исходных файлов для страницы с помощью средства "Поиск"

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

Вы можете фильтровать запросы по свойствам, по типу или по времени, а также скрывать URL-адреса данных. Раскрывающийся список "Дополнительные фильтры " содержит следующие параметры и флажки состояния:

• Скрытие URL-адресов данных
• Скрытие URL-адресов расширений
• Заблокированные файлы cookie ответа
• Заблокированные запросы
• Запросы третьих сторон

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

Фильтрация запросов по свойствам

Используйте текстовое поле Фильтр для фильтрации запросов по свойствам, таким как домен или размер запроса.

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

Текстовое поле фильтра :

Чтобы инвертировать фильтр, установите флажок Инвертировать рядом с полем фильтра .

Вы можете использовать несколько свойств одновременно, разделяя их пробелом. Например, mime-type:image/png larger-than:1K отображаются все PNG размером более 1 килобайта. Фильтры с несколькими свойствами эквивалентны операциям AND . OR Операции не поддерживаются.

Полный список поддерживаемых свойств:

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

Чтобы отфильтровать запросы по типу запроса, нажмите кнопки в средстве "Сеть": All, Fetch/XHR, Doc, CSS, JS,Font, Img, Media, Manifest, WS (WebSocket), Wasm (WebAssembly) или Other (любой другой тип, не перечисленный здесь).

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

Чтобы включить несколько типов фильтров одновременно, нажмите и удерживайте клавишу CTRL (Windows, Linux) или COMMAND (macOS) и щелкните фильтры.

Фильтрация запросов по времени

Щелкните и перетащите влево или вправо в области "Обзор ", чтобы отобразить только запросы, которые были активны в течение этого периода времени. Фильтр включает приложения. Отображаются все запросы, которые были активны в течение выделенного времени.

Фильтрация всех запросов, которые были неактивны в течение 300 мс:

Скрытие URL-адресов данных

URL-адреса данных — это небольшие файлы, встроенные в другие документы. Любой запрос, который отображается в таблице "Запросы " и начинается с data: , является URL-адресом данных.

Чтобы скрыть запросы, снимите флажок Скрыть URL-адреса данных :

Скрытие URL-адресов расширений

Чтобы сосредоточиться на создаваемом коде, вы можете отфильтровать ненужные запросы, отправленные расширениями, которые вы, возможно, установили в Microsoft Edge. Запросы на расширение имеют URL-адреса, которые начинаются с chrome-extension://.

Чтобы скрыть запросы расширения, на панели действий фильтров выберите раскрывающееся меню Дополнительные фильтры и нажмите Скрыть URL-адреса расширений , чтобы рядом с ними появился флажок:

В строке состояния внизу отображается количество показанных запросов от общего количества, например 5 / 10 запросов.

Показывать только запросы с заблокированными файлами cookie ответа

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

Затем, чтобы узнать, почему был заблокирован файл cookie ответа, выберите запрос (в разделе "Имя"), откройте его вкладку "Файлы cookie " (справа) и наведите курсор на значок информации ().

Например, вы можете:

1. В Microsoft Edge выберите "Параметры и другое>" Новое окно InPrivate.

2. В адресной строке введите Microsoft.com.

3. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

4. Выберите инструмент "Сеть ".

5. Убедитесь, что нажата кнопка "Все фильтры".

6. Обновите веб-страницу.

   Множество сообщений перечислены в средстве " Сеть ".

7. На панели действий фильтров выберите раскрывающийся список "Другие фильтры" и выберите "Заблокированные файлы cookie ответа".

   В меню рядом с файлами cookie с заблокированным ответом появится флажок.

8. Щелкните за пределами раскрывающегося списка, чтобы закрыть его.

   Отображаются запросы с заблокированными файлами cookie, такими как id?d_visid_ver=....

9. Выберите запрос, например id?d_visid_ver=....

   Откроется боковая панель с вкладками.

10. Откройте вкладку "Файлы cookie ".

11. Наведите курсор на значок информации ().

    Подсказка гласит, например: "Эта попытка установить файл cookie с помощью заголовка Set-Cookie заблокирована из-за предпочтений пользователя".

    

    В строке состояния внизу отображается количество показанных запросов от общего количества.

Кроме того, средство "Сеть " отображает значок предупреждения () рядом с запросом, блокируя файлы cookie из-за флагов Edge или конфигурации. Наведите курсор на значок, чтобы увидеть подсказку, и щелкните ее, чтобы перейти к средству "Проблемы " для получения дополнительных сведений.

Показать только заблокированные запросы

Чтобы отфильтровать все, кроме заблокированных запросов, на панели действий "Фильтры" выберите "Другие фильтры>"Заблокированные запросы, чтобы появился флажок. Чтобы проверить это, вы можете использовать инструмент блокировки сетевых запросов на панели быстрого просмотра в нижней части средств разработчика; см. Блокировка запросов в разделе Проверка сетевой активности.

Например, вы можете:

1. Перейдите на веб-страницу, например на демонстрационную страницу проверки сетевой активности , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы " перечислены .html, .css, .pngи .js файлы.

5. В раскрывающемся списке "Другие фильтры " (с подсказкой "Показать только/скрыть запросы") выберите "Заблокированные запросы".

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

6. Щелкните за пределами раскрывающегося списка, чтобы закрыть его.

   Таблица "Запросы " пуста, так как средства разработчика не блокируют запросы, и теперь запросы фильтруются для отображения только заблокированных запросов.

7. Нажмите клавишу ESC один или два раза, чтобы панель быстрого просмотра открылась в нижней части средств разработчика.

8. На панели быстрого просмотра нажмите кнопку Дополнительные средства ("), а затем выберите пункт "Блокировка сетевых запросов".

   Средство блокировки сетевых запросов открывается на панели быстрого просмотра .

9. В средстве блокировки сетевых запросов нажмите кнопку Добавить шаблон блокировки сетевых запросов (").

10. В текстовом поле Текстовый шаблон для блокировки совпадающих запросов введите *.pngи нажмите кнопку Добавить .

    *.png отображается в списке, рядом с флажком.

    В средстве "Сеть " таблица "Запросы " по-прежнему пуста, так как ни один запрос не был активно заблокирован.

11. Обновите веб-страницу.

    

    • На демонстрационной веб-странице вместо логотипа Microsoft Edge рядом с заголовком отображается значок разбитого изображения, а также замещающий текст изображения (логотип средств разработчика Microsoft Edge).

    • В средстве " Сеть " в таблице "Запросы " перечислены .png только файлы. В таблице "Запросы " заблокированные запросы выделены красным цветом.

    • В инструменте " Сеть " в строке состояния внизу отображается количество показанных запросов от общего количества, например 2 / 5 запросов.

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

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

В строке состояния внизу отображается количество показанных запросов от общего количества.

Сортировка запросов

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

Сортировка по столбцам

Щелкните заголовок любого столбца в Запросах , чтобы отсортировать запросы по этому столбцу.

Сортировать по этапу активности

Столбец "Водопад" по умолчанию отключен. Чтобы включить столбец "Водопад ": щелкните правой кнопкой мыши заголовок таблицы "Запросы ", а затем выберите простой пункт меню "Водопад " без подменю.

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

• Щелкните правой кнопкой мыши заголовок таблицы "Запросы ", выберите "Каскад", а затем выберите один из следующих вариантов:

  • Start Time (Время начала ) — первый инициированный запрос помещается вверху.

  • Время отклика — первый запрос, который начал скачивание, помещается вверху.

  • Время окончания — первый завершенный запрос помещается вверху.

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

  • Задержка — запрос, ожидающий ответа меньше всего, помещается вверху.

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

Ниже показана сортировка водопада по общей длительности. Более светлая часть каждого отрезка — это время, затраченное на ожидание, а темная часть — время, затраченное на скачивание байтов:

Анализ запросов

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

Отображение журнала запросов

Используйте таблицу "Запросы " для отображения журнала всех запросов, выполненных во время открытых средств разработчика. Чтобы отобразить дополнительные сведения о каждом элементе, щелкните или наведите указатель мыши на запросы.

По умолчанию в таблице "Запросы " отображаются следующие столбцы:

• Имя. Имя файла ресурса или идентификатор ресурса.
• Состояние. Код состояния HTTP.
• Тип. Тип MIME запрошенного ресурса.
• Инициатор. Следующие объекты или процессы могут инициировать запросы:
  • Синтаксический анализ. Средство анализа HTML.
  • Перенаправление. Перенаправление HTTP.
  • Сценарий. Функция JavaScript.
  • Дополнительно. Другие процессы или действия, например переход на страницу по ссылке или ввод URL-адреса в адресной строке.
• Размер. Совокупный размер заголовков ответа и текста ответа, доставляемых сервером.
• Время. Общая длительность — от начала запроса до получения последнего байта в ответе.
• Выполнено. Был ли запрос выполнен кэшем HTTP или служебным сценарием приложения.

Столбец "Водопад" по умолчанию отключен. Чтобы включить столбец "Водопад ", щелкните правой кнопкой мыши заголовок таблицы "Запросы ", а затем выберите простой пункт меню "Водопад " без подменю.

Добавление и удаление столбцов

Щелкните правой кнопкой мыши заголовок таблицы "Запросы " и выберите имя столбца, чтобы скрыть или отобразить его. Рядом с отображаемыми столбцами установлены флажки:

Добавление настраиваемых столбцов для заголовков ответов

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

1. Щелкните правой кнопкой мыши заголовок таблицы "Запросы " и выберите "Заголовки ответов>" Управление столбцами заголовков.

   Откроется всплывающее окно "Управление столбцами заголовков ":

   

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

Группировка запросов по встроенным фреймам

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

Группировка запросов по элементам iframes

1. Перейдите на веб-страницу, например в демонстрацию средства "Сеть", в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы" средства "Сеть" отображаются строки для:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. На демонстрационной веб-странице нажмите кнопку Загрузить iframe .

   В таблицу "Запросы " добавляется множество строк:

   

6. В средстве " Сеть " нажмите кнопку " Параметры сети " ("), а затем установите флажок " Группировка по фрейму ".

   В таблице "Запросы " отображаются расширяемые имена фреймов.

7. В таблице "Запросы " щелкните треугольник-расширитель на фрейме.

   Отображаются запросы, инициированные встроенным кадром:

   

Отображение отношения времени запросов

Используйте столбец "Каскадная встреча" в области "Запросы " для просмотра временных связей запросов. По умолчанию столбец "Водопад " использует время начала запросов. Таким образом, запросы слева запущены раньше, чем запросы правее.

Столбец "Водопад" по умолчанию отключен. Чтобы включить столбец "Водопад ", щелкните правой кнопкой мыши заголовок таблицы "Запросы ", а затем выберите простой пункт меню "Водопад " без подменю.

Чтобы ознакомиться с различными способами сортировки каскада, см. раздел "Сортировка по этапу действия" выше.

Столбец "Водопад" на панели "Запросы":

Анализ сообщений WebSocket-соединения

Просмотр сообщений о подключении WebSocket

1. Перейдите на веб-страницу, например в веб-тестер сокетов.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. Выберите инструмент "Сеть ".

   По умолчанию нажата кнопка "Все фильтры". Панель сети пуста, сообщения не отображаются.

4. Обновите веб-страницу.

   В таблице "Запросы" средства "Сеть" перечислено много запросов.

5. В верхней части средства " Сеть " нажмите кнопку "Фильтр сокетов " с подсказкой: WebSocket | Веб-транспорт | DirectSocket.

   Отфильтрованный список запросов пуст.

6. На веб-странице Online Websocket Tester нажмите кнопку "Подключиться ".

   Если вы не настроили учетную запись и токен API, на странице отобразится:

   • Подключение установлено
   • {"error":"Unknown api key"} с треугольником, указывающим вниз; Отправляется с сервера в браузер.

   В средстве Сеть на вкладке Сообщения отображается запрос:

   • channel_123?api_key=...

7. В списке запросов выберите WebSocket-подключение, например channel_123?api_key=....

   Откроется боковая панель с вкладками.

8. Откройте вкладку "Сообщения ".

   Если вы не регистрировались для получения маркера API, на вкладке "Сообщения " отображается сообщение:

   • {"error":"Unknown api key"} с красной стрелкой вниз; Отправляется с сервера в браузер.

9. На веб-странице Online Websocket Tester в текстовом поле измените Hello PieSocket! на Hello world!, а затем нажмите кнопку Отправить .

   На веб-странице консоли отображается сообщение "Hello world!" с треугольником, направленным вверх; Отправляется из браузера на сервер.

   В средстве " Сеть " на вкладке "Сообщения " в таблице отображаются последние 100 сообщений; В этом случае сообщение добавляется:

   • Привет, мир! с зеленой стрелкой вверх; Отправляется из браузера на сервер:

Примечание. Чтобы получить сообщения с красными стрелками вниз (выводимые с сервера), а также с зелеными стрелками вверх, вам потребуется:

1. Создайте учетную запись на сайте PieSocket. При этом создается маркер API.

2. Создайте кластер на сайте PieSocket.

3. На странице панели мониторинга PieSocket нажмите кнопку Test online .

   Откроется страница Online WebSocket Tester с параметрами запроса.

4. Нажмите кнопку "Подключиться ".

Чтобы обновить таблицу "Запросы ", в области "Имя " снова щелкните имя подключения WebSocket.

Таблица "Запросы " содержит следующие три столбца:

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

  • Рамка продолжения
  • Двоичный фрейм
  • Рамка закрытия соединения
  • Ping Frame
  • Рамка для понга

• Длина. Длина полезных данных сообщения в байтах.

• Время. Время получения или отправки сообщения.

Анализ событий в потоке

Чтобы просмотреть события, потоки которых серверы передают через API Fetch, API EventSource и XHR, выполните следующие действия.

1. Перейдите на веб-страницу, на которой транслируются события, например справочные материалы по средству "Сеть" Demo, в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы" средства "Сеть" отображаются строки для:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. На демонстрационной веб-странице нажмите кнопку "События, отправленные с сервера Stream".

   В таблицу "Запросы " добавлена строка sse (событие, отправленное сервером).

6. sse Выберите запрос (событие, отправленное сервером).

   Откроется боковая панель, в том числе вкладка EventStream .

7. Выберите вкладку EventStream :

   

   Новое сообщение приветствия приходит и отображается раз в секунду.

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

Чтобы очистить список записанных событий, нажмите кнопку Очистить ().

См. также:

• Использование API удаленного доступа
• События, отправляемые сервером — API EventSource.
• Запрос XMLHttpRequest — XHR.

Предварительный просмотр текста ответа

Предварительный просмотр содержимого текста HTTP-ответа:

1. В инструменте " Сеть " в таблице "Запросы " в столбце "Имя " щелкните имя запроса.

2. На боковой панели выберите вкладку "Предварительный просмотр ".

   

Вкладка "Просмотр" в основном полезна для просмотра изображений.

Вывод текста ответа

Чтобы отобразить текст ответа на запрос:

1. В таблице "Запросы " в столбце "Имя " щелкните имя запроса.

2. На боковой панели выберите вкладку "Ответ ":

   

Отображение заголовков HTTP

Чтобы отобразить данные заголовка HTTP о запросе:

1. В таблице "Запросы " щелкните имя запроса.

2. На боковой панели выберите вкладку "Заголовки ", а затем прокрутите вниз, чтобы увидеть различные разделы:

   • Общие
   • Заголовки ранних подсказок (необязательно)
   • Заголовки ответа
   • Заголовки запросов

   

Просмотр источника заголовков HTTP

По умолчанию имена заголовков отображаются на вкладке " Заголовки " в алфавитном порядке. Чтобы отобразить имена заголовков HTTP в порядке их получения:

1. Перейдите на веб-страницу, где используется XHR, например Удаление -ms-high-contrast и использование принудительных цветов на основе стандартов в Microsoft Edge в новом окне или вкладке.

2. Принимайте файлы cookie в приглашении баннера, если оно появляется.

   В регионах, где действует Генеральный регламент по защите данных (GDPR), этот сайт отображает баннер файлов cookie и не отправляет collect запрос (ниже), если вы не принимаете файлы cookie в баннере.

3. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

4. Выберите инструмент "Сеть ".

5. Обновите веб-страницу.

   В таблице "Запросы " перечислено множество запросов.

6. Нажмите красную кнопку Остановить запись сетевого журнала () вверху.

7. В таблице "Запросы " щелкните столбец "Имя ", чтобы отсортировать запросы в алфавитном порядке, а затем выберите запрос на сбор .

   Откроется боковая панель с вкладками.

8. Откройте вкладку "Заголовки ".

   

9. Установите флажок "Сырое " в разделе "Заголовки ответа" или " Заголовки запроса ".

См. также:

• Отображение заголовков HTTP выше.

Предупреждение о предварительных заголовках

Иногда на вкладке «Заголовки » отображается предупреждающее сообщение «Отображаются временные заголовки». Это может быть вызвано следующими причинами:

• Запрос не был отправлен по сети, а был обработан из локального кэша, который не хранит исходные заголовки запроса.
• Сетевой ресурс недопустим.
• Из соображений безопасности.

Предположим, что запрос не был отправлен по сети, а был обработан из локального кэша, который не хранит исходные заголовки запроса. В этом случае вы можете установить флажок Отключить кэш в верхней части средства "Сеть ", чтобы видеть полные заголовки запросов. Например, вы можете:

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

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. Выберите инструмент "Сеть ".

4. Обновите веб-страницу.

5. Выберите сетевой запросgetstarted.js .

   В разделе заголовков запроса отображается сообщение: Отображаются временные заголовки. Отключите кэш, чтобы видеть полные заголовки.

   

6. Установите флажок Отключить кэш в верхней части средства Сеть .

7. Обновите веб-страницу.

8. Выберите сетевой запросgetstarted.js .

   В разделе «Заголовки запросов » сообщение больше не отображается; Отображаются полные заголовки запросов.

См. также:

• Эмуляция нового посетителя путем отключения кэша браузера (см. выше).

Просмотр полезных данных запроса (параметры строки запроса и данные формы)

Чтобы просмотреть полезные данные HTTP-запроса (параметры строки запроса и данные формы), выберите запрос из таблицы "Запросы ", а затем перейдите на вкладку "Полезные данные " на боковой панели, как показано ниже.

1. Перейдите на веб-страницу, например в демонстрацию средства "Сеть", в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы" средства "Сеть" отображаются строки для:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js
   • favicon.png

5. На демонстрационной веб-странице нажмите кнопку «Отправить данные формы ».

   В таблицу "Запросы" средства "Сеть" добавлена строка:

   • form-data-endpoint?hasfile=true

6. Выделите строку form-data-endpoint?hasfile=true.

   Откроется боковая панель, в том числе вкладка полезных данных .

7. Откройте вкладку полезных данных .

   Отображаются полезные данные запроса, включая раздел параметров строки запроса и раздел данных формы :

На вкладке "Консоль " средств разработчика возникает ошибка:

• POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

Эта безвредная ошибка " Метод не разрешен" отображается в консоли, так как на демонстрационном сервере нет form-data-endpoint обработчика POST. Ошибка ожидаема, так как github.io хостинг не запускает серверы приложений, а только статические файлы.

Просмотр источника полезных данных

По умолчанию средство "Сеть" отображает полезную нагрузку в удобочитаемом виде.

Чтобы вместо этого просмотреть источники строковых параметров запроса или данных формы:

1. Выполните действия, описанные в предыдущем разделе выше.

   На вкладке Полезная нагрузка в разделе Параметры строки запроса показаны полезные данные в удобочитаемой форме, для hasfile. В разделе «Данные формы » отображаются полезные данные в удобочитаемой форме, для username, timestamp, и file:

   

2. Рядом с заголовком раздела Параметры строки запроса нажмите кнопку Просмотр исходного кода .

3. Рядом с заголовком раздела "Данные формы " нажмите кнопку "Просмотр исходного кода ".

   Отображается информация об источнике полезных данных:

   

Отображение параметров строки запроса с кодированным URL-адресом

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

1. Откройте в новом окне или на вкладке веб-страницу, использующую параметры строки запроса, например справочные материалы по средству "Сеть".

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   В таблице "Запросы " перечислены .html, .css, .jsи .png файлы.

5. На демонстрационной веб-странице нажмите кнопку Отправить закодированные параметры запроса .

   В таблицу "Запросы " добавлена строка:

   encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

6. Выделите строку encoded-query-params-endpoint .

   Откроется боковая панель с вкладками.

7. На боковой панели выберите вкладку полезных данных .

   В разделе "Параметры строки запроса" отображается декодированный URL-адрес в следующем виде: https://contoso.com/àéèôçл

   

8. В разделе Параметры строки запроса нажмите кнопку Просмотреть закодированный URL-адрес .

   URL-адрес теперь отображается с закодированными символами (такими как %3A и ); %2Fа метка кнопки меняется на Просмотр декодированного:

   

9. Нажмите кнопку Просмотреть декодированные .

   URL-адрес снова отображается с декодированными символами, как: https://contoso.com/àéèôçл, а подпись кнопки меняется на "Просмотреть URL-адрес".

Отображение файлов cookie

Чтобы отобразить файлы cookie, отправленные в HTTP-заголовке запроса, выполните следующие действия.

1. В таблице "Запросы " щелкните имя запроса.

2. На боковой панели выберите вкладку "Файлы cookie ".

   

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

Чтобы изменить файлы cookie, см. раздел Просмотр, изменение и удаление файлов cookie.

Отображение временной разбивки запроса

Чтобы отобразить временную разбивку запроса:

1. В таблице "Запрос" щелкните имя запроса.

2. На боковой панели выберите вкладку "Время ".

   

Сведения о более быстром доступе к данным см. в статье "Просмотр временной разбивки".

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

Предварительный просмотр временной разбивки

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

Столбец "Водопад" по умолчанию отключен. Чтобы включить столбец "Водопад ", щелкните правой кнопкой мыши заголовок таблицы "Запросы ", а затем выберите простой пункт меню "Водопад " без подменю.

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

Объяснение этапов разбивки времени

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

• Организация очередей. Браузер ставит запросы в очередь, если выполняется любое из следующих условий

  • Есть запросы с более высоким приоритетом.
  • Для этого источника уже открыто шесть TCP-соединений, что является пределом. Применимо только к HTTP/1.0 и HTTP/1.1.
  • Браузер кратковременно выделяет место в дисковом кэше.

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

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

• respondWith. Когда запрос обрабатывается служебным сценарием, respondWith — это время, затраченное служебным сценарием на выполнение обратного fetchEvent.respondWith() вызова.

• Поиск DNS. Браузер разрешает IP-адрес для запроса.

• Первичное подключение. Браузер устанавливает соединение, включая подтверждения TCP и повторные попытки, а также согласовывает протокол SSL.

• Согласование прокси-сервера. Браузер согласовывает запрос с прокси-сервером.

• Запрос отправлен. Запрос отправляется.

• Подготовка ServiceWorker. Браузер запускает служебный сценарий.

• Запрос в ServiceWorker. Запрос отправляется служебному сценарию.

• Ожидание (TTFB). Браузер ожидает первый байт ответа. TTFB означает время до первого байта. Это время включает в себя один круговой путь задержки и время, затраченное сервером на подготовку ответа.

• Скачивание содержимого. Браузер получает ответ.

• Получение пуша. Браузер получает данные для этого ответа через HTTP/2 Server Push.

• Толчок при чтении. Браузер считывает ранее полученные локальные данные.

Анализ маршрутизации запроса служебного сценария

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

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

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

2. Щелкните страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. Выберите инструмент "Сеть ".

4. Перезагрузите страницу.

5. В списке запросов выберите сетевой запрос, прошедший через файл служебного сценария. Например, выберите about.css.

   Откроется боковая панель.

6. На боковой панели выберите вкладку "Время".

   

   В разделе "Служебный сценарий " отображается информация о времени выполнения этапов запуска и respondWith .

7. Щелкните стрелку расширителя в разделе respondWith :

   

8. В разделе respondWith щелкните стрелку расширителя для исходного запроса:

   

9. После получения ответа щелкните стрелку расширителя.

Отображение инициаторов и зависимостей

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

• Запросы, инициировавшие запрос, при наведении указателя на экран, отображаются зеленым цветом.
• Зависимости запросов, на которые наведено курсорирование, отображаются красным цветом.

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

Отображение событий загрузки

DevTools отображает время событий DOMContentLoaded and в load нескольких местах инструмента " Сеть ":

• В области "Обзор " с вертикальными линиями.

• В столбце Waterfall таблицы Request с вертикальными линиями. Столбец "Водопад" по умолчанию отключен. Чтобы включить столбец "Водопад ", щелкните правой кнопкой мыши заголовок таблицы "Запросы ", а затем выберите простой пункт меню "Водопад " без подменю.

• На панели Сводка в нижней части инструмента Сеть с метками времени.

Событие DOMContentLoaded выделено синим цветом, а load событие — красным.

Отображение общего количества запросов

Общее количество запросов указано в области "Сводка " в нижней части средства "Сеть ".

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

Отображение общего размера скачиваемых файлов

Общий размер запросов на скачивание можно найти в области "Сводка " в нижней части средства "Сеть ".

Внимание! Этот номер отслеживает только запросы, зарегистрированные с момента открытия средств разработчика. Если другие запросы были выполнены до открытия DevTools, предыдущие запросы не учитываются.

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

Отображение трассировки стека, вызвавшей запрос

После того как инструкция JavaScript запрашивает ресурс, наведите курсор на столбец "Инициатор ", чтобы отобразить трассировку стека, ведущую к запросу.

Отображение несжатого размера ресурса

Чтобы увидеть одновременно переданный и несжатый размер ресурса:

1. В правом верхнем углу окна Сеть щелкните значок Параметры сети (шестеренка). Появится ряд флажков.

2. Установите флажок "Большие строки запроса".

3. Проверьте столбец "Размер " в таблице "Запросы". Верхнее значение — это передаваемый размер, а нижнее значение — размер ресурса после того, как браузер распакует его:

   

Экспорт данных запросов

Вы можете экспортировать или скопировать список запросов с примененными фильтрами несколькими способами, описанными ниже.

Сохранение всех сетевых запросов в HAR-файле

HAR (Архив HTTP) — это формат файлов, используемый несколькими инструментами для сеансов HTTP для экспорта захваченных данных. Формат — это объект JSON с определенным набором полей. См. HAR Analyzer.

Чтобы снизить вероятность случайной утечки конфиденциальной информации, по умолчанию можно экспортировать «очищенный» сетевой журнал в формате HAR, который исключает конфиденциальную информацию, такую как Cookie, Set-Cookieи Authorization заголовки. При необходимости вы также можете экспортировать журнал с конфиденциальными данными.

Чтобы сохранить все сетевые запросы в HAR-файле без конфиденциальных данных, выполните следующие действия.

1. Перейдите на веб-страницу, например на демонстрационную страницу проверки сетевой активности , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

5. Щелкните правой кнопкой мыши любой запрос в таблице "Запросы " и выберите команду Копировать>все как HAR (очищенный):

   

   Или на панели действий в верхней части средства Сеть нажмите кнопку Экспортировать HAR (очищенный) ()).

Средства разработчика сохраняют все запросы, выполненные с момента открытия средств разработчика в файле HAR.

Вы не можете фильтровать запросы и не можете сохранить ни один запрос.

Чтобы сохранить все сетевые запросы в HAR-файле, включая конфиденциальные данные:

1. В средствах разработчика выберите "Настроенные" и управляйте параметрами средств> разработчика.

   Откроется страница настроек>.

2. Прокрутите страницу вниз до раздела "Сеть ".

3. Установите флажок Разрешить создание HAR с конфиденциальными данными.

4. Нажмите кнопку "Закрыть " (").

5. В средстве " Сеть " щелкните правой кнопкой мыши любой запрос в таблице "Запросы " и выберите "Копировать>все как HAR (с конфиденциальными данными)".

   Или нажмите кнопку экспорта HAR (очищенной или с конфиденциальными данными) (") на панели действий и выберите "Экспортировать HAR (с конфиденциальными данными)".

   

Импорт файла HAR в средства разработчика для анализа

После создания файла HAR его можно импортировать обратно в средства разработчика для анализа с помощью анализатора HAR.

Чтобы импортировать файл HAR в средства разработчика для анализа:

• На панели действий в верхней части средства "Сеть " нажмите кнопку "Импорт файла HAR " (").

• Или перетащите HAR-файл в таблицу "Запросы ".

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

Копирование сетевых запросов в буфер обмена

В столбце "Имя " таблицы "Запросы " щелкните запрос правой кнопкой мыши, наведите указатель мыши на "Копировать" и выберите один из следующих вариантов.

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

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

Чтобы скопировать отфильтрованный набор запросов, примените фильтр к сетевому журналу, щелкните запрос правой кнопкой мыши и выберите команду:

См. также:

• Фильтрация запросов выше.

Скопируйте отформатированный ответ JSON в буфер обмена

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

1. В таблице "Запросы " щелкните имя запроса, который привел к ответу JSON.

2. На боковой панели выберите вкладку "Предварительный просмотр ".

3. Щелкните правой кнопкой мыши первую строку отформатированного ответа JSON и выберите команду "Копировать значение".

   

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

Копирование значений свойств из сетевых запросов в буфер обмена

Чтобы скопировать значения свойств из сетевых запросов в буфер обмена:

1. В таблице "Запрос" щелкните имя запроса.

2. На боковой панели выберите вкладку полезных данных :

3. Разверните один из следующих разделов.

   • Запрос полезных данных (JSON)
   • Данные форм
   • Параметры строки запроса
   • Заголовки запросов
   • Заголовки ответа

4. Щелкните значение правой кнопкой мыши и выберите команду "Копировать значение". Теперь вы можете вставить значение в любой редактор.

Изменение макета средства "Сеть"

Вы можете разворачивать и сворачивать разделы пользовательского интерфейса средства " Сеть ", чтобы сосредоточить внимание на важной информации.

Скрытие области фильтров

По умолчанию в средствах разработчика отображается область "Фильтры ". Чтобы скрыть область фильтров , выберите "Фильтр ()".

Использование больших строк запроса

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

• Нижнее значение столбца "Размер " — это несжатый размер запроса.

• В столбце "Приоритет" (не отображается по умолчанию) показан приоритет начального (нижнее значение) и конечного (верхнее значение) приоритета получения.

Чтобы включить большие строки:

1. Перейдите на веб-страницу, например на демонстрационную страницу проверки сетевой активности , в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

3. В средствах разработчика выберите средство "Сеть ".

4. Обновите веб-страницу.

   Запросы отображаются небольшими строками.

5. В средстве "Сеть" нажмите кнопку "Параметры сети" ("), а затем установите флажок "Большие строки запроса".

   Запросы отображаются большими строками:

   

Скрытие области "Обзор"

По умолчанию в средствах разработчика отображается область "Обзор ". Чтобы скрыть область "Обзор ", снимите флажок "Показать обзор ".

См. также

• Проверка сетевой активности : пошаговое руководство и введение в средство "Сеть ".

Демонстрационные веб-страницы:

• Проверка сетевой активности
• Справочник по средствам сети Demo
• Приложение TODO

Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.