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

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

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

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

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

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

Например:

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

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

   Откроется devTools.

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

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

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

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

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

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

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

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

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

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

См. также:

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

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

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

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

См. также:

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

Создание снимков экрана во время загрузки страницы

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

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

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

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

   Откроется devTools.

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

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

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

   

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

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

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

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

   

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

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

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

Воспроизведение запроса XHR

Чтобы воспроизвести запрос XHR, выполните приведенные далее действия.

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

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

   Откроется devTools.

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

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

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

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

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

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

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

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

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

   

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

• Ниже отображаются инициаторы и зависимости.
• Зайдите в журнал сетевой активности в разделе Проверка сетевой активности.

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

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

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

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

Флажок Отключить кэш :

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

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

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

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

   

См. также:

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

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

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

См. также:

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

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

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

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

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

Эмулировать медленные сетевые подключения

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

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

• Fast 4G
• Медленный 4G
• 3G
• Offline

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

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

См. также:

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

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

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

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

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

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

   Откроется devTools.

3. Выберите средство "Сеть ".

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

   Или выберите Настроить и управлять параметрами Средства разработки>>Регулирование.

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

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

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

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

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

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

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

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

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

12. Установите флажок Изменение порядка пакетов :

    

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

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

    

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

15. Выберите средство "Сеть ".

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

    

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

См. также:

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

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

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

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

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

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

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

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

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

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

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

   Откроется devTools.

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

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

6. На веб-странице Online WebSocket Tester в текстовом поле сообщения удалите DevTools без регулирования и введите DevTools с регулированием.

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

   На консоли веб-страницы online WebSocket Tester отображаются средства разработки с регулированием.

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

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

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

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

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

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

Эмулировать медленные сетевые подключения из средства "Условия сети"

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

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

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

См. также:

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

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

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

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

См. также:

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

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

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

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

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

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

Настройка указаний клиента агента пользователя

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

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

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

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

   

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

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

   • Торговая марка и версия , такие как 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. Щелкните один из результатов поиска. Средство "Сеть" выделяет желтым цветом соответствующий запрос. Средство "Сеть" также открывает вкладку Заголовки или Ответ и выделяет соответствующую строку, если она есть.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы отфильтровать запросы по типу запроса, нажмите кнопки в средстве "Сеть ": Все, 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. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

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. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

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

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

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

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

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

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

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

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

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

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

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

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

    *.png отображается с галочкой.

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

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

    

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

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

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

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

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

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

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

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

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

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

Сортировка по этапу действия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

   Откроется devTools.

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

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

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

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

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

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

   

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

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

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

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

   

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

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

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

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

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

Анализ сообщений подключения WebSocket

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

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

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

   Откроется devTools.

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 нажмите кнопку Проверить в сети .

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

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

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

Таблица Requests содержит следующие три столбца:

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

  • Кадр продолжения
  • Двоичный кадр
  • Кадр закрытия подключения
  • Рамка проверки пинга
  • Рамка Pong

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

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

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

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

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

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

   Откроется devTools.

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

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

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

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

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

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

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

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

7. Перейдите на вкладку EventStream :

   

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

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

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

См. также:

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

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

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

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

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

   

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

Отображение текста ответа

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

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

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

   

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

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

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

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

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

   

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

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

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

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

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

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

   Откроется devTools.

4. Выберите средство "Сеть ".

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

   В таблице Запросы указано много запросов.

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

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

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

8. Перейдите на вкладку Заголовки :

   

9. Установите флажок Необработанный рядом с разделом Заголовки ответов или Заголовки запросов .

См. также:

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

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

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

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

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

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

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

   Откроется devTools.

3. Выберите средство "Сеть ".

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

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

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

   

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

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

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

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

См. также:

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

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

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

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

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

   Откроется devTools.

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. Перейдите на вкладку Полезные данные .

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

На вкладке Консоль devTools отображается ошибка:

• 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. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

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

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

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

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

   В таблице Requests добавляется строка:

   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. На боковой панели выберите вкладку Время .

   

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

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

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

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

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

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

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

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

• Постановка в очередь. Браузер помещает запросы в очередь, если любое из следующих значений имеет значение true.

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

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

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

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

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

• Отправленный запрос. Запрос отправляется.

• Подготовка ServiceWorker. Браузер запускает рабочую роль службы.

• Запрос к ServiceWorker. Запрос отправляется в рабочую роль службы.

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

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

• Получение push-уведомлений. Браузер получает данные для этого ответа через http/2 Server Push.

• Чтение push-уведомлений. Браузер считывает полученные ранее локальные данные.

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

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

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

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

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

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

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

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

• В области Сводка в нижней части средства "Сеть" с метками времени.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

   Откроется devTools.

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

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

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

   

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

DevTools сохраняет все запросы, выполненные с момента открытия devTools, в HAR-файл.

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

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

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

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

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

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

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

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

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

   

Импорт HAR-файла в DevTools для анализа

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

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

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

• Или перетащите HAR-файл в таблицу Requests .

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

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

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

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

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

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

См. также:

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

Копирование форматированного json ответа в буфер обмена

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

Скрытие области "Фильтры"

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

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

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

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

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

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

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

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

   Откроется devTools.

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

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

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

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

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

   

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

По умолчанию devTools отображает панель Обзор . Чтобы скрыть панель Обзор , снимите флажок Показать обзор .

См. также

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

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

• Проверка активности сети
• Демонстрация справочника по сетевым инструментам
• Приложение TODO

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