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

София Емельянова
Sofia Emelianova

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

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

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

Панель «Сеть».

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

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

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

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

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

Кнопка «Очистить».

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

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

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

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

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

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

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

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

Захват скриншотов включен.

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

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

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

Выбор воспроизведения XHR.

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

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

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

Флажок «Отключить кеш».

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

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

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

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

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

Выбор «Очистить кэш браузера».

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

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

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

Автономный режим выбран из раскрывающегося меню.

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

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

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

Меню регулирования сети.

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

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

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

  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 браузера» .

Выбор «Очистить файлы cookie браузера».

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

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

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

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

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

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

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

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

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

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

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

Вы можете использовать несколько свойств одновременно, разделяя каждое свойство пробелом. Например, 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), а затем щелкните.

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

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

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

Фильтрация любых запросов, которые не были активны в течение 21-25 мс.

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

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

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

URL-адреса данных скрыты из таблицы «Запросы».

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

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

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

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

URL-адреса расширений скрыты из таблицы «Запросы».

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

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

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

В таблице «Запросы» показаны только запросы с заблокированными ответными файлами cookie.

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

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

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

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

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

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

В таблице «Запросы» показаны только заблокированные запросы.

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

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

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

В таблице «Запросы» показаны только сторонние запросы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблица «Запросы».

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

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

    Различные значения в столбце Статус.

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

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

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

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

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

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

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

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

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

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

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

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

Добавление пользовательского столбца в таблицу «Запросы».

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

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

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

Журнал сетевых запросов с запросами, сгруппированными по 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-адреса ».

Переключить кодировку URL.

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

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

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

Вкладка «Файлы 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 — в красный.

Расположение событий DOMContentLoaded и загрузки на панели «Сеть».

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

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

Общее количество запросов с момента открытия DevTools.

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

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

Общий размер переданных и загруженных ресурсов.

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

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

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

Трассировка стека, ведущая к запросу ресурса.

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

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

Пример несжатых ресурсов.

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

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

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

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

Вы можете сохранить все сетевые запросы в файл 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 . Скопируйте все запросы в виде цепочки вызовов выборки.

  • Скопируйте все как Node.js fetch . Скопируйте все запросы в виде цепочки вызовов выборки Node.js.

  • Скопируйте все как HAR . Скопируйте все запросы как данные HAR.

Выбор параметров копирования.

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

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

Скрыть панель «Фильтры»

По умолчанию DevTools отображает панель «Фильтры» . Нажмите Фильтр Фильтр. чтобы скрыть это.

Кнопка «Скрыть фильтры».

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

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

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

Большие строки запросов включены.

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

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

Флажок «Показать обзор».