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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

Четкие запросы

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

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

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

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

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

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

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

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

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

Повторить XHR-запрос

Для повторного выполнения XHR-запроса выполните одно из следующих действий в таблице Requests :

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

Изменение характера загрузки

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

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

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

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

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

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

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

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

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

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

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

Имитация медленных сетевых соединений

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

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

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

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

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

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

   

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

Регулировать соединения WebSocket

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

Чтобы отслеживать ограничение скорости WebSocket:

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

Имитируйте медленное сетевое соединение через меню «Состояние сети».

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

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

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

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

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

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

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

Для ручной переопределения пользовательского агента:

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

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

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

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

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

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

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

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

Для получения более подробной информации обо всех способах поиска в DevTools см. раздел «Поиск: Найти текст во всех загруженных ресурсах» .

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

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

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

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

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

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

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

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

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

Чтобы отфильтровать запросы по типу ресурса, нажмите кнопки «Все» , «Получить/XHR» , «JS» , «CSS» , «Img» , «Медиа» , «Шрифт» , «Doc» , «WS (WebSocket)», «Wasm (WebAssembly)», «Манифест» или «Другой» (любой другой тип, не указанный здесь) на панели «Сеть» .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запросы на сортировку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

• Размер . Суммарный размер заголовков ответа и тела ответа, предоставленного сервером.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проанализируйте сообщения WebSocket-соединения.

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

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

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

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

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

Сообщения выделены цветом в зависимости от их типа:

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

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

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

1. Записывайте сетевые запросы на странице, которая транслирует события.
2. В разделе «Сеть» выберите запрос и откройте вкладку «Поток событий» .

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

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

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

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

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

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

Просмотреть текст ответа

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

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

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

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

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

В разделе «Общие» в инструментах разработчика рядом с полученным кодом состояния 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. Нажмите на вкладку «Cookies» .

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

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

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

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

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

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

Подробнее о каждом из этапов, которые вы можете увидеть на вкладке «Время» , см. в разделе «Объяснение этапов разбивки по времени» .

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

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

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

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

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

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

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

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

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

Просмотреть события загрузки

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

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

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

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

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

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

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

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

Просмотрите трассировку стека, которая привела к запросу.

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

Просмотреть несжатый размер ресурса

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

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

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

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

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

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

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

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

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

  

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

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

  

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

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

Примечание: Панель «Сеть» считывает и отображает инициаторов запросов, импортированных из HAR-файлов.

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

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

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

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

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

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

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

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

Изменить расположение элементов на панели «Сеть».

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

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

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

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

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

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

Скрыть дорожку «Обзор»

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