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

Kayce Basques

Sofia Emelianova

Откройте для себя новые способы анализа загрузки вашей страницы в этом подробном справочнике по функциям сетевого анализа Chrome DevTools.

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

По умолчанию DevTools записывает все сетевые запросы на панели «Сеть» , пока DevTools открыт.

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

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

• Нажмите «Остановить запись сетевого журнала». на панели «Сеть» . Он станет серым, что означает, что DevTools больше не записывает запросы.
• Нажмите Command > + E (Mac) или Control + E (Windows, Linux), когда панель «Сеть» находится в фокусе.

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

Нажмите «Очистить». на панели «Сеть» , чтобы удалить все запросы из таблицы «Запросы» .

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

Чтобы сохранять запросы при загрузке страниц, установите флажок «Сохранить журнал» на панели «Сеть» . DevTools сохраняет все запросы, пока вы не отключите Preserve log .

Делайте снимки экрана во время загрузки страницы

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

Чтобы включить снимки экрана, откройте «Настройки». на панели «Сеть» и установите флажок «Снимать снимки экрана» .

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

После захвата вы можете взаимодействовать со снимками экрана следующими способами:

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

Воспроизвести запрос XHR

Чтобы воспроизвести запрос XHR, выполните одно из следующих действий в таблице «Запросы» :

• Выберите запрос и нажмите R.
• Щелкните запрос правой кнопкой мыши и выберите «Воспроизвести XHR» .

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

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

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

Отключите кеш браузера в ящике «Условия сети».

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

1. Нажмите кнопку значок, чтобы открыть ящик «Состояния сети» .
2. Установите или снимите флажок Отключить кеш .

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

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

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

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

Чтобы имитировать работу полностью автономной сети, выберите «Автономно» в раскрывающемся меню «Регулирование сети» рядом с флажком «Отключить кеш» .

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

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

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

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

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

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

1. Откройте меню «Регулирование» и выберите «Пользовательский» > «Добавить...» .
2. Настройте новый профиль регулирования, как описано в разделе «Настройки» > «Регулирование» .

3. Вернувшись на панель «Сеть» , выберите новый профиль в раскрывающемся меню «Регулирование».

   

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

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

Помимо HTTP-запросов, DevTools регулирует соединения WebSocket, начиная с версии 99.

Чтобы наблюдать за регулированием WebSocket:

1. Инициируйте новое соединение, например, с помощью инструмента тестирования .
2. На панели «Сеть» выберите «Без регулирования» и отправьте сообщение через соединение.
3. Создайте очень медленный собственный профиль регулирования , например, 10 kbit/s . Такой медленный профиль поможет вам заметить разницу.
4. На панели «Сеть» выберите профиль и отправьте еще одно сообщение.
5. Включите фильтр WS , щелкните имя своего соединения, откройте вкладку «Сообщения» и проверьте разницу во времени между отправленными и отраженными сообщениями с регулированием и без него. Например:

Эмулируйте медленные сетевые соединения из панели «Условия сети».

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

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

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

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

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

См . раздел Локальное переопределение файлов и заголовков ответов HTTP .

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

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

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

Поисковые запросы

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

1. Нажмите следующий ярлык, чтобы открыть вкладку «Поиск» справа:

   • В macOS нажмите Command + F.
   • В Windows или Linux нажмите Control + F.

2. На вкладке «Поиск » введите запрос и нажмите Enter . При необходимости нажмите match_case или Regular_expression , чтобы включить чувствительность к регистру или регулярные выражения соответственно.

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

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

Дополнительные сведения обо всех способах поиска в DevTools см. в разделе Поиск: поиск текста во всех загруженных ресурсах .

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

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

Используйте поле «Фильтр» , чтобы фильтровать запросы по свойствам, таким как домен или размер запроса.

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

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

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

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

• cookie-domain . Показать ресурсы, которые устанавливают определенный домен cookie .
• cookie-name . Показать ресурсы, которые установили определенное имя файла cookie .
• cookie-path . Показать ресурсы, которые устанавливают определенный путь к файлам cookie .
• cookie-value . Показать ресурсы, которые устанавливают определенное значение файла cookie .
• domain . Отображать ресурсы только из указанного домена. Вы можете использовать подстановочный знак ( * ), чтобы включить несколько доменов. Например, *.com отображает ресурсы всех доменных имен, заканчивающихся на .com . DevTools показывает, что раскрывающееся меню автозаполнения заполняет все обнаруженные домены.
• has-overrides . Показать запросы с переопределенным content , headers , любыми переопределениями ( yes ) или без переопределений ( no ). Вы можете добавить соответствующий столбец « Имеет переопределения» в таблицу запросов.
• has-response-header . Показать ресурсы, содержащие указанный заголовок ответа HTTP. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными заголовками ответов.
• is . Используйте is:running для поиска ресурсов WebSocket .
• larger-than . Показывать ресурсы, размер которых превышает указанный, в байтах. Установка значения 1000 эквивалентна установке значения 1k .
• method . Показать ресурсы, полученные с помощью указанного типа метода HTTP. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными методами HTTP.
• mime-type . Показать ресурсы указанного типа MIME. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными типами MIME.
• mixed-content . Показать все ресурсы со смешанным контентом ( mixed-content:all ) или только те, которые отображаются ( mixed-content:displayed ).
• priority . Показать ресурсы, уровень приоритета которых соответствует указанному значению.
• resource-type . Показать ресурсы типа ресурса, например, изображения. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными типами ресурсов.
• response-header-set-cookie . Показывать необработанные заголовки Set-Cookie на вкладке «Проблемы». Неверно сформированные файлы cookie с неправильными заголовками Set-Cookie будут отмечены на панели «Сеть».
• scheme . Показать ресурсы, полученные по незащищенному HTTP ( scheme:http ) или защищенному HTTPS ( scheme:https ).
• set-cookie-domain . Показать ресурсы, имеющие заголовок Set-Cookie с атрибутом Domain , соответствующим указанному значению. DevTools заполняет автозаполнение всеми обнаруженными доменами файлов cookie.
• set-cookie-name . Показать ресурсы, имеющие заголовок Set-Cookie с именем, соответствующим указанному значению. DevTools заполняет автозаполнение всеми обнаруженными именами файлов cookie.
• set-cookie-value . Показать ресурсы, имеющие заголовок Set-Cookie со значением, соответствующим указанному значению. DevTools заполняет автозаполнение всеми обнаруженными значениями файлов cookie.
• status-code . Показывать только ресурсы, код состояния HTTP которых соответствует указанному коду. DevTools заполняет раскрывающееся меню автозаполнения всеми обнаруженными кодами состояния.
• url . Показать ресурсы, url которых соответствует указанному значению.

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

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

Если вы не видите эти кнопки, вероятно, панель действий «Фильтры» скрыта. См. раздел Скрытие панели фильтров .

Чтобы одновременно отобразить ресурсы нескольких типов, удерживайте кнопку «Command» (Mac) или «Control» (Windows, Linux), а затем щелкните несколько фильтров типов.

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

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

Скрыть URL-адреса данных

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

Чтобы скрыть эти запросы, на панели действий «Фильтры » выберите «Дополнительные фильтры» > установите флажок « Скрыть URL-адреса данных» .

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

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

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

Чтобы скрыть запросы расширений, на панели действий «Фильтры » выберите «Дополнительные фильтры» > установите флажок «Скрыть URL-адреса расширений» .

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

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

Чтобы отфильтровать все, кроме запросов с ответными файлами cookie, заблокированными по какой-либо причине, на панели действий «Фильтры» выберите «Дополнительные фильтры» > check_box «Заблокировать файлы cookie ответа» . Попробуйте это на этой демонстрационной странице .

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

Чтобы узнать причину блокировки ответного файла cookie, выберите запрос, откройте вкладку «Файлы cookie» и наведите указатель мыши на значок информационной информации .

Кроме того, на панели «Сеть» рядом с запросом, файлы cookie которого заблокированы из-за флагов или конфигурации Chrome, отображается значок предупреждения . Наведите указатель мыши на значок, чтобы увидеть всплывающую подсказку с подсказкой, и щелкните ее, чтобы перейти на панель «Проблемы» для получения дополнительной информации.

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

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

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

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

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

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

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

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

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

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

Сортировать по фазе активности

Чтобы изменить способ сортировки запросов Waterfall , щелкните правой кнопкой мыши заголовок таблицы Requests, наведите указатель мыши на Waterfall и выберите один из следующих параметров:

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

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

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

Анализируйте запросы

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

Посмотреть журнал запросов

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

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

• Имя . Имя файла или идентификатор ресурса.

• Статус . В этом столбце могут отображаться следующие значения:

  

  • Код состояния HTTP, например, 200 или 404 .
  • CORS error для запросов не удалась из-за совместного использования ресурсов между источниками (CORS).
  • (blocked:origin) для запросов с неправильно настроенными заголовками. Наведите указатель мыши на это значение статуса, чтобы увидеть всплывающую подсказку с подсказкой о том, что пошло не так.
  • (failed) за которым следует сообщение об ошибке.

• Тип . MIME-тип запрошенного ресурса.

• Инициатор . Следующие объекты или процессы могут инициировать запросы:

  • Парсер . HTML-парсер Chrome.
  • Перенаправление . HTTP-перенаправление.
  • Скрипт . Функция JavaScript.
  • Другой . Какой-либо другой процесс или действие, например переход на страницу по ссылке или ввод URL-адреса в адресную строку.

• Размер . Общий размер заголовков ответа плюс тело ответа, доставленное сервером.

• Время . Общая продолжительность от начала запроса до получения последнего байта ответа.

• Водопад . Визуальная разбивка активности каждого запроса.

Добавить или удалить столбцы

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

Вы можете добавить или удалить следующие дополнительные столбцы: Путь , URL-адрес , Метод , Протокол , Схема , Домен , Удаленный адрес , Удаленное адресное пространство , Адресное пространство инициатора , Файлы cookie , Установить файлы cookie , Приоритет , Идентификатор соединения , Имеет переопределения и Водопад .

Добавить пользовательские столбцы

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

1. Щелкните правой кнопкой мыши заголовок таблицы « Запросы» и выберите «Заголовки ответов» > «Управление столбцами заголовков» .
2. В диалоговом окне нажмите «Добавить пользовательский заголовок» , введите его имя и нажмите «Добавить» .

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

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

Чтобы сгруппировать запросы по iframe, откройте «Настройки» внутри панели «Сеть» и установите флажок « Группировать по кадру ».

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

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

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

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

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

Чтобы просмотреть сообщения соединения WebSocket:

1. В столбце «Имя» таблицы «Запросы » щелкните URL-адрес подключения WebSocket.
2. Откройте вкладку «Сообщения» . В таблице показаны последние 100 сообщений.

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

Таблица содержит три столбца:

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

Сообщения имеют цветовую маркировку в зависимости от их типа:

• Исходящие текстовые сообщения имеют светло-зеленый цвет.
• Входящие текстовые сообщения имеют белый цвет.
• Коды операций WebSocket имеют светло-желтый цвет.
• Ошибки имеют светло-красный цвет.

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

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

1. Записывайте сетевые запросы на странице, которая транслирует события. Например, откройте эту демонстрационную страницу и нажмите любую из трех кнопок.
2. В Network выберите запрос и откройте вкладку EventStream .

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

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

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

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

1. Щелкните URL-адрес запроса в столбце «Имя» таблицы « Запросы» .
2. Откройте вкладку «Предварительный просмотр» .

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

Просмотр тела ответа

Чтобы просмотреть тело ответа на запрос:

1. Щелкните URL-адрес запроса в столбце «Имя» таблицы «Запросы».
2. Откройте вкладку «Ответ» .

Просмотр HTTP-заголовков

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

1. Щелкните запрос в таблице «Запросы» .
2. Откройте вкладку «Заголовки» и прокрутите вниз до разделов «Общие» , «Заголовки ответов» , «Заголовки запросов» и, при необходимости, «Заголовки ранних подсказок» .

В разделе «Общие» DevTools отображает удобочитаемое сообщение о состоянии рядом с полученным кодом состояния HTTP.

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

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

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

1. Откройте вкладку «Заголовки» для интересующего вас запроса. См. Просмотр заголовков HTTP .
2. Нажмите «Просмотреть источник » рядом с разделом «Заголовок запроса» или «Заголовок ответа» .

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

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

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

• Сетевой ресурс недействителен. Например, выполните fetch("https://jec.fish.com/unknown-url/") в консоли .

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

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

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

Просмотр источника полезной нагрузки

По умолчанию DevTools отображает полезную нагрузку в удобочитаемой форме.

Чтобы просмотреть источники параметров строки запроса и данных формы, на вкладке « Полезные данные » нажмите «Просмотреть источник» рядом с разделами «Параметры строки запроса» или «Данные формы» .

Просмотр декодированных URL-адресов аргументов параметров строки запроса

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

Просмотр файлов cookie

Чтобы просмотреть файлы cookie, отправленные в HTTP-заголовке запроса:

1. Щелкните URL-адрес запроса в столбце «Имя» таблицы «Запросы».
2. Откройте вкладку «Файлы cookie» .

Описание каждого столбца см. в разделе Поля .

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

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

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

1. Щелкните URL-адрес запроса в столбце «Имя» таблицы « Запросы» .
2. Откройте вкладку «Время» .

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

Дополнительные сведения о каждой фазе, которые вы можете увидеть на вкладке «Время» , см. в разделе «Фазы разбивки по времени» .

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

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

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

Объяснение фаз временной разбивки

Более подробную информацию о каждом этапе вы можете увидеть на вкладке «Время» :

• Очередь . Браузер ставит запросы в очередь перед началом соединения и когда:
  • Есть запросы с более высоким приоритетом.
  • Для этого источника уже открыто шесть TCP-соединений, что является пределом. Применяется только к HTTP/1.0 и HTTP/1.1.
  • Браузер ненадолго выделяет место в дисковом кеше.
• Застопорился . Запрос мог быть остановлен после начала соединения по любой из причин, описанных в разделе «Очередь» .
• DNS-поиск . Браузер обрабатывает IP-адрес запроса.
• Первоначальное подключение . Браузер устанавливает соединение, включая TCP-квитирование или повторные попытки, а также согласование SSL.
• Переговоры по прокси . Браузер согласовывает запрос с прокси-сервером .
• Запрос отправлен . Запрос отправляется.
• Подготовка ServiceWorker . Браузер запускает сервис-воркера.
• Запрос к ServiceWorker . Запрос отправляется сервисному работнику.
• Ожидание (TTFB) . Браузер ожидает первого байта ответа. TTFB означает время до первого байта. Это время включает в себя 1 задержку туда и обратно и время, необходимое серверу для подготовки ответа.
• Загрузка контента . Браузер получает ответ либо непосредственно из сети, либо от сервис-воркера. Это значение представляет собой общее количество времени, потраченное на чтение тела ответа. Значения, превышающие ожидаемые, могут указывать на медленную работу сети или на то, что браузер занят выполнением другой работы, которая задерживает чтение ответа.

Просмотр инициаторов и зависимостей

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

Когда таблица «Запросы» упорядочена в хронологическом порядке, первый зеленый запрос над запросом, над которым вы наводите курсор, является инициатором зависимости. Если над этим есть еще один зеленый запрос, то этот более высокий запрос является инициатором инициатора. И так далее.

Просмотр событий загрузки

DevTools отображает время DOMContentLoaded и событий load в нескольких местах на панели «Сеть» . Событие DOMContentLoaded окрашено в синий цвет, а событие load — в красный.

Посмотреть общее количество запросов

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

Просмотр общего размера переданных и загруженных ресурсов

DevTools отображает общий размер переданных и загруженных (несжатых) ресурсов в строке состояния в нижней части панели «Сеть» .

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

Просмотрите трассировку стека, вызвавшую запрос.

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

Просмотр несжатого размера ресурса

Проверьте настройки > Большие строки запроса , а затем посмотрите на нижнее значение столбца Размер .

В этом примере сжатый размер документа www.google.com , отправленного по сети, составлял 43.8 KB , тогда как несжатый размер составлял 136 KB .

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

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

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

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

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

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

• Щелкните правой кнопкой мыши любой запрос в таблице «Запросы» и выберите «Копировать » > «Сохранить все [в списке] как HAR (очищенные)» или «Сохранить все [в списке] как HAR (с конфиденциальными данными)» .

  

• Нажмите «Загрузить Экспортировать HAR (дезинфицированный)...» на панели действий в верхней части панели «Сеть» .

  Чтобы экспортировать конфиденциальные данные, сначала включите настройки «Настройки» > «Настройки» > «Сеть» > установите флажок «Разрешить генерировать HAR с конфиденциальными данными» , затем нажмите и удерживайте кнопку загрузки «Экспорт» и выберите «Экспортировать HAR (с конфиденциальными данными)» .

  

Получив файл HAR, вы можете импортировать его обратно в DevTools для анализа двумя способами:

• Перетащите файл HAR в таблицу «Запросы» .
• Нажмите «Загрузить Импортировать HAR» на панели действий в верхней части панели «Сеть» .

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

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

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

• Скопировать URL-адрес . Скопируйте URL-адрес запроса в буфер обмена.
• Скопируйте как cURL . Скопируйте запрос как команду cURL.
• Скопируйте как PowerShell . Скопируйте запрос как команду PowerShell.
• Копировать как получить . Скопируйте запрос как вызов выборки.
• Копировать как выборку (Node.js) . Скопируйте запрос как вызов выборки Node.js.
• Скопируйте ответ . Скопируйте тело ответа в буфер обмена.
• Скопировать трассировку стека . Скопируйте дорожку стека запроса в буфер обмена.

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

• Скопируйте все URL-адреса . Скопируйте URL-адреса всех запросов в буфер обмена.
• Скопируйте все как cURL . Скопируйте все запросы в виде цепочки команд cURL.
• Скопируйте все как PowerShell . Скопируйте все запросы в виде цепочки команд PowerShell.
• Скопируйте все как fetch . Скопируйте все запросы в виде цепочки вызовов выборки.
• Скопируйте все как fetch (Node.js) . Скопируйте все запросы в виде цепочки вызовов выборки Node.js.
• Скопируйте все как HAR (дезинфицировано) . Скопируйте все запросы как данные HAR без конфиденциальных данных, таких как заголовки Cookie , Set-Cookie и Authorization .
• Скопируйте все как HAR (с конфиденциальными данными) . Скопируйте все запросы как данные HAR с конфиденциальными данными.

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

• Скопируйте все перечисленные URL-адреса . Скопируйте URL-адреса всех отфильтрованных запросов в буфер обмена.
• Скопируйте все, что указано как cURL . Скопируйте все отфильтрованные запросы в виде цепочки команд cURL.
• Скопируйте все, что указано как PowerShell . Скопируйте все отфильтрованные запросы в виде цепочки команд PowerShell.
• Скопируйте все перечисленное как fetch . Скопируйте все отфильтрованные запросы в виде цепочки вызовов выборки.
• Скопируйте все перечисленное как fetch (Node.js) . Скопируйте все отфильтрованные запросы в виде цепочки вызовов выборки Node.js.
• Скопируйте все, что указано как HAR (дезинфицировано) . Скопируйте все отфильтрованные запросы как данные HAR без конфиденциальных данных, таких как заголовки Cookie , Set-Cookie и Authorization .
• Скопируйте все, что указано как HAR (с конфиденциальными данными) . Скопируйте все отфильтрованные запросы как данные HAR с конфиденциальными данными.

Изменение макета панели «Сеть»

Разверните или сверните разделы пользовательского интерфейса панели «Сеть» , чтобы сосредоточиться на том, что важно для вас.

Скрыть панель действий «Фильтры»

По умолчанию DevTools отображает панель фильтров в верхней части панели «Сеть» . Нажмите filter_alt Фильтр , чтобы скрыть его.

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

Используйте большие строки, если вам нужно больше пробелов в таблице сетевых запросов. Некоторые столбцы также предоставляют немного больше информации при использовании больших строк. Например, нижнее значение столбца «Размер» — это несжатый размер запроса, а столбец «Приоритет» показывает как начальный (нижнее значение), так и окончательный (верхнее значение) приоритет выборки.

Открыть настройки и нажмите «Большие строки запроса», чтобы увидеть большие строки.

Скрыть обзорную дорожку

По умолчанию DevTools отображает дорожку «Обзор» . Открыть настройки и снимите флажок «Показать обзор», чтобы скрыть его.