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

Узнайте, как анализировать загрузку страниц с помощью инструментов разработчика Chrome.

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

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

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

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

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

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

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

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

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

Как делать скриншоты во время загрузки страницы

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

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

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

После того как вы сделали скриншот, вы можете:

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

Как изменить и повторно отправить запрос

Вы можете изменить и повторно отправить любой сетевой запрос, который можно получить, из таблицы Запросы:

1. Нажмите на запрос правой кнопкой мыши и выберите Изменить и отправить повторно как запрос на получение. Инструменты разработчика откроют панель Консоль с запросом, заполненным как вызов fetch(), сохраняя исходные параметры запроса и контекст выполнения.
2. При необходимости измените вызов fetch() в консоли, а затем нажмите клавишу Ввод, чтобы отправить запрос повторно.

Как изменить алгоритм загрузки

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

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

Отключите кеширование в браузере на панели "Условия сети".

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

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

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

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

Эмулировать офлайн-режим

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

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

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

Эмуляция медленного подключения к сети

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

Если на панели Производительность включены полевые показатели, один из вариантов регулирования в меню может быть отмечен как рекомендуемый на основе данных Chrome User Experience Report.

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

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

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

1. Откройте меню Ограничение скорости и выберите Специальный > Добавить….
2. Настройте новый профиль ограничения частоты, как описано в разделе Настройки Настройки > Ограничение частоты.

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

   

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

Ограничение подключений WebSocket

Начиная с версии 99, Инструменты разработчика ограничивают не только HTTP-запросы, но и подключения WebSocket.

Чтобы посмотреть, как работает ограничение пропускной способности WebSocket:

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

Эмуляция медленного подключения к сети на панели "Состояние сети"

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

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

Как вручную удалить файлы cookie браузера

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

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

Подробнее о том, как переопределять файлы и заголовки HTTP-ответов локально…

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

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

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

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

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

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

   • На устройстве с macOS нажмите Command + F.
   • На компьютере с Windows или Linux: Ctrl + F.

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

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

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

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

Как фильтровать запросы

Как фильтровать запросы по свойствам

Используйте поле Фильтр, чтобы отфильтровать запросы по свойствам, например домену или размеру запроса, или введите текстовую строку, чтобы найти совпадения в URL запроса, домене, имени хоста или порте (например, localhost или example.com), включая запросы с того же сайта.

Если вы не видите поле, возможно, панель Фильтры скрыта. Подробнее о том, как скрыть панель фильтров…

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

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

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

• 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-ответа. В раскрывающемся списке автозаполнения будут показаны все заголовки ответов, которые встречались в инструментах разработчика.
• 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 соответствует указанному значению.

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

Чтобы отфильтровать запросы по типу ресурса, на панели Сеть нажмите одну из следующих кнопок: Все, Fetch/XHR, JS, CSS, Изображение, Медиа, Шрифт, Документ, WS (WebSocket), Wasm (WebAssembly), Манифест или Другое (любой другой тип, не указанный здесь).

Если вы не видите эти кнопки, возможно, панель действий Фильтры скрыта. Подробнее о том, как скрыть панель фильтров…

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

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

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

Скрыть URL данных

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

Чтобы скрыть эти запросы, на панели действий Фильтры выберите Ещё фильтров > check_box Скрыть URL данных.

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

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

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

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

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

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

Чтобы отфильтровать все запросы, кроме тех, в которых файлы cookie ответов заблокированы по любой причине, на панели действий Фильтры выберите Ещё фильтры > check_box Заблокированные файлы cookie ответов.

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

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

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

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

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

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

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

Чтобы отфильтровать все, кроме запросов, источник которых отличается от источника страницы, на панели действий Фильтры выберите Ещё фильтры > check_box Сторонние запросы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Название Название файла или идентификатор ресурса.

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

  

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

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

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

  • Парсер. Синтаксический анализатор HTML в Chrome.
  • Переадресация. HTTP-переадресация.
  • Script. Функция JavaScript. В этом случае на панели Сеть будет приведена ссылка на соответствующую строку в исходном файле.
  • Ранние подсказки. HTTP-ответ 103 Early Hints.
  • Другое. Другое действие, например переход на страницу по ссылке или ввод URL в адресной строке.

• Размер. Общий размер заголовков ответа и тела ответа, полученных от сервера.

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

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

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

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

Вы можете добавить или удалить следующие дополнительные столбцы:

• Номер запроса. Абсолютный порядок инициации запроса, по умолчанию закрепленный на первой позиции в таблице Запросы.
• Путь. Часть URL, в которой содержится путь.
• URL. Полный URL запроса.
• Метод. HTTP-метод запроса (например, GET, POST, PUT, DELETE).
• Протокол. Протокол запроса (например, h2 для HTTP/2, h3 для HTTP/3 и т. д.).
• Схема. Часть URL, в которой содержится схема.
• Домен. Доменная часть URL.
• Удаленный адрес. Удаленный IP-адрес и порт запроса.
• Удаленное адресное пространство. Удаленное адресное пространство запроса. Public – для общедоступных IP-адресов, Private – для частных IP-адресов.
• Адресное пространство инициатора. Адресное пространство инициатора запроса. Как на пульте.
• Файлы cookie. Количество файлов cookie в запросе.
• Полученные файлы cookie. Количество файлов cookie в ответе.
• Приоритет. Приоритет запроса.
• Идентификатор подключения. Идентификатор подключения запроса в клиентском сеансе (если есть).
• С переопределением. Есть ли в запросе переопределения (да, нет, контент или заголовки).
• Связан с рекламой. Верно или нет:
• Предварительно загруженные. Был ли запрос инициирован с помощью спекулятивной предзагрузки.
• Блокировка отрисовки. Блокирует ли запрос отрисовку, потенциально блокирует или нет.
• Водопад. Визуальная разбивка действий по каждому запросу.

Как добавить специальные столбцы

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

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

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

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

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

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

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

На вкладке Waterfall (Каскад) можно посмотреть, как запросы соотносятся друг с другом по времени. По умолчанию каскад упорядочен по времени начала запросов. Запросы, расположенные левее, были отправлены раньше, чем те, что находятся правее.

Подробнее о том, как сортировать данные в каскаде по этапам активности…

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

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

1. В столбце Name (Название) таблицы Requests (Запросы) нажмите на URL подключения WebSocket.
2. Откройте вкладку Сообщения. В таблице показаны последние 100 сообщений.

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

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

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

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

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

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

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

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

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

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

Как посмотреть предварительную версию тела ответа

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

1. Выберите запрос в столбце Название таблицы Запросы.
2. Откройте вкладку Предварительный просмотр.

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

Как посмотреть тело ответа

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

1. Выберите запрос в столбце Название в таблице Запросы.
2. Откройте вкладку Ответ.

Для ответов в двоичном или сжатом формате выберите метод декодирования (Base64, Hex или UTF-8) в раскрывающемся меню в нижней части вкладки Ответ.

Как посмотреть заголовки HTTP

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

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

В разделе General (Общие) инструменты разработчика показывают человекочитаемое сообщение о статусе рядом с полученным кодом статуса HTTP.

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

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

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

1. Откройте вкладку Заголовки для нужного запроса. Подробнее о том, как посмотреть HTTP-заголовки…
2. Нажмите Посмотреть источник рядом с разделом Заголовок запроса или Заголовок ответа.

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

Иногда на вкладке Заголовки показывается предупреждение Provisional headers are shown.... Вот возможные причины:

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

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

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

Как посмотреть полезную нагрузку запроса

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

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

По умолчанию в Инструментах разработчика полезная нагрузка показывается в человекочитаемом виде.

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

Просмотр параметров запроса и формы в URL-кодировке

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

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

Для двоичных или сжатых полезных нагрузок запроса выберите метод декодирования (Base64, Hex или UTF-8) в раскрывающемся меню в нижней части вкладки Полезная нагрузка.

Как посмотреть файлы cookie

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

1. Выберите запрос в столбце Название в таблице Запросы.
2. Перейдите на вкладку Файлы cookie.

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

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

Как посмотреть сеансы с привязкой к устройству

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

Чтобы посмотреть информацию об отсрочке (обновлении):

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

Вкладка Сеансы, связанные с устройством показывается только для запросов с файлами cookie. На вкладке перечислены все активные сеансы с привязкой к устройству и указано, был ли запрос отложен (и если нет, то почему). Возможные варианты отсрочки:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

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

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

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

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

Подробнее о фазах, которые могут быть указаны на вкладке Время, рассказывается в разделе Объяснение фаз разбивки по времени.

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

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

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

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

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

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

Как посмотреть инициаторы и зависимости

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

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

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

Инструменты разработчика показывают время событий DOMContentLoaded и load в нескольких местах на панели Сеть. Событие DOMContentLoaded выделено синим цветом, а событие load – красным.

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

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

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

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

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

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

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

Как посмотреть размер ресурса в несжатом виде

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

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

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

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

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

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

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

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

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

  

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

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

  

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

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

копировать в буфер обмена один запрос, все запросы или только те, которые соответствуют заданным фильтрам;

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

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

• Копировать URL. Скопируйте URL запроса в буфер обмена.
• Копировать как cURL. Скопируйте запрос в виде команды cURL.
• Копировать как PowerShell. Скопируйте запрос в виде команды PowerShell.
• Копировать как запрос. Скопируйте запрос в виде вызова fetch.
• Копировать как fetch (Node.js). Скопировать запрос как вызов fetch в Node.js.
• Копировать как элемент предварительной загрузки. Скопируйте запрос в виде HTML-тега <link rel="preload">.
• Копировать ответ. Скопируйте тело ответа в буфер обмена.
• Копировать трассировку стека. Скопировать трассировку стека запроса в буфер обмена.

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

• Скопировать все 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. Скопируйте все отфильтрованные запросы в виде цепочки команд PowerShell.
• Копировать все как fetch. Копировать все отфильтрованные запросы в виде цепочки вызовов fetch.
• Скопировать все как fetch (Node.js). Скопировать все отфильтрованные запросы как цепочку вызовов fetch в Node.js.
• Скопировать все как HAR (очищено). Скопировать все отфильтрованные запросы как данные HAR без конфиденциальных данных, таких как заголовки Cookie, Set-Cookie и Authorization.
• Скопировать все как HAR (с конфиденциальными данными). Скопировать все отфильтрованные запросы как HAR-данные с конфиденциальными данными.

Как изменить макет панели "Сеть"

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

Скрыть панель фильтров

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

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

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

Откройте Настройки и нажмите Большие строки запросов.

Как скрыть дорожку "Обзор"

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