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

Kayce Basques

Sofia Emelianova

Discover new ways to analyze how your page loads in this comprehensive reference of Chrome DevTools network analysis features.

Record network requests

By default, DevTools records all network requests in the Network panel, so long as DevTools is open.

Stop recording network requests

To stop recording requests:

• Нажмите «Остановить запись сетевого журнала» on the Network panel. It turns grey to indicate that DevTools is no longer recording requests.
• Press Command > + E (Mac) or Control + E (Windows, Linux) while the Network panel is in focus.

Clear requests

Нажмите «Очистить» on the Network panel to clear all requests from the Requests table.

Save requests across page loads

To save requests across page loads, check the Preserve log checkbox on the Network panel. DevTools saves all requests until you disable Preserve log .

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

Capture screenshots to analyze what users see as they wait for your page to load.

To enable screenshots, open Settings inside the Network panel and check Capture screenshots .

Reload the page while the Network panel is in focus to capture screenshots.

Once captured, you can interact with screenshots in the following ways:

• Hover over a screenshot to view the point at which that screenshot was captured. A yellow line appears on the Overview timeline.
• Click a screenshot's thumbnail to filter out any requests that occurred after the screenshot was captured.
• Double-click a thumbnail to zoom in on it.

Replay XHR request

To replay an XHR request, do one of the following in the Requests table:

• Select the request and press R .
• Right-click the request and select Replay XHR .

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

Emulate a first-time visitor by disabling the browser cache

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

Disable the browser cache from the Network conditions drawer

If you want to disable the cache while working in other DevTools panels, use the Network conditions drawer.

1. Нажмите icon to open the Network Conditions drawer.
2. Установите или снимите флажок «Отключить кэширование» .

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

To manually clear the browser cache at any time, right-click anywhere in the Requests table and select Clear browser cache .

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

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

To simulate a completely offline network experience, select Offline from the Network throttling drop-down menu next to the Disable cache checkbox.

DevTools displays a warning icon next to the Network tab to remind you that offline is enabled.

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

To emulate fast 4G, slow 4G, or 3G, select the corresponding preset from the Throttling drop-down menu in the action bar at the top.

If you have Field metrics turned on in the Performance panel, one of the throttling options in the menu may be marked as recommended based on Chrome User Experience Report data.

DevTools displays a warning warning icon next to the Network panel to remind you that throttling is enabled.

Create custom throttling profiles

In addition to presets, such as slow or fast 4G, you can also add your own custom throttling profiles:

1. Open the Throttling menu and select Custom > Add... .
2. Set up a new throttling profile as described in settings Settings > Throttling .

3. Back on the Network panel, select your new profile from the Throttling drop-down menu.

   

Инструменты разработчика отображают warning icon next to the Network panel to remind you that throttling is enabled.

Throttle WebSocket connections

In addition to HTTP requests, DevTools throttles WebSocket connections since version 99.

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

1. Initiate a new connection, for example, by using a test tool .
2. On the Network panel, select No throttling and send a message through the connection.
3. Create a very slow custom throttling profile , for example, 10 kbit/s . Such a slow profile will help you notice the difference.
4. On the Network panel, select the profile and send another message.
5. Toggle the WS filter, click your connection name, open the Messages tab, and check the time difference between sent and echoed messages with and without throttling. For example:

Emulate slow network connections from the Network conditions drawer

If you want to throttle the network connection while working in other DevTools panels, use the Network conditions drawer.

1. Нажмите значок для открытия панели «Состояние сети» .
2. Select a connection speed from the Network throttling menu.

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

To manually clear browser cookies at any time, right-click anywhere in the Requests table and select Clear browser cookies .

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

See Override files and HTTP response headers locally .

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

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

1. Нажмите значок для открытия панели «Состояние сети» .
2. Очистить Выбор автоматически .
3. Choose a user agent option from the menu, or enter a custom one in the box.

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

To search across request headers, payloads, and responses:

1. Press the following shortcut to open the Search tab on the right:

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

2. In the Search tab, enter your query and press Enter . Optionally click match_case or regular_expression to turn on case sensitivity or regular expressions respectively.

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

To refresh search results, click refresh Refresh . To clear results, click block Clear .

For more information on all the ways you can search in DevTools, see Search: Find text across all loaded resources .

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

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

Use the Filter box to filter requests by properties, such as the domain or size of the request.

If you can't see the box, the Filters bar is probably hidden. See Hide the Filters bar .

To invert your filter, check the Invert checkbox next to the Filter box.

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

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

• cookie-domain . Show the resources that set a specific cookie domain .
• cookie-name . Show the resources that set a specific cookie name .
• cookie-path . Show the resources that set a specific cookie path .
• cookie-value . Show the resources that set a specific cookie value .
• domain . Отображать только ресурсы из указанного домена. Для включения нескольких доменов можно использовать символ подстановки ( * ). Например, *.com отображает ресурсы из всех доменных имен, заканчивающихся на .com . Инструменты разработчика отображают и заполняют выпадающее меню автозаполнения всеми найденными доменами.
• has-overrides . Show requests that have overridden content , headers , any overrides ( yes ), or no overrides ( no ). You can add the corresponding Has overrides column to the request table.
• has-response-header . Отображает ресурсы, содержащие указанный заголовок HTTP-ответа. Инструменты разработчика заполняют выпадающий список автозаполнения всеми полученными заголовками ответа.
• is . Используйте is:running для поиска ресурсов WebSocket .
• larger-than . Show resources that are larger than the specified size, in bytes. Setting a value of 1000 is equivalent to setting a value of 1k .
• method . Show resources that were retrieved over a specified HTTP method type. DevTools populates the autocomplete drop-down with all of the HTTP methods it has encountered.
• mime-type . Отображает ресурсы указанного MIME-типа. Инструменты разработчика заполняют выпадающий список автозаполнения всеми обнаруженными MIME-типами.
• mixed-content . Show all mixed content resources ( mixed-content:all ) or just the ones that are displayed ( mixed-content:displayed ).
• priority . Show resources whose priority level matches the specified value.
• resource-type . Show resources of a resource type, for example, image. DevTools populates the autocomplete drop-down with all resource types it has encountered.
• response-header-set-cookie . Show raw Set-Cookie headers in the Issues tab. Malformed cookies with incorrect Set-Cookie headers will be flagged in the Network panel.
• scheme . Show resources retrieved over unprotected HTTP ( scheme:http ) or protected HTTPS ( scheme:https ).
• set-cookie-domain . Отображает ресурсы, имеющие заголовок Set-Cookie с атрибутом Domain , соответствующим указанному значению. Инструменты разработчика заполняют поле автозаполнения всеми обнаруженными доменами cookie.
• set-cookie-name . Отобразить ресурсы, у которых заголовок Set-Cookie содержит имя, соответствующее указанному значению. Инструменты разработчика заполняют поле автозаполнения всеми найденными именами cookie.
• set-cookie-value . Отображает ресурсы, у которых заголовок Set-Cookie содержит значение, соответствующее указанному. Инструменты разработчика заполняют поле автозаполнения всеми найденными значениями cookie.
• status-code . Only show resources whose HTTP status code match the specified code. DevTools populates the autocomplete drop-down menu with all of the status codes it has encountered.
• url . Show the resources that have a url matching the specified value.

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

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

If you can't see these buttons, the Filters action bar is probably hidden. See Hide the Filters bar .

To show resources of multiple types simultaneously, hold Command (Mac) or Control (Windows, Linux) and then click several type filters.

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

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

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

Data URLs are small files embedded into other documents. Any request that you see in the Requests table that starts with data: is a data URL.

To hide these requests, in the Filters action bar, select More filters > check_box Hide data URLs .

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

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

To focus on the code you author, you can filter out irrelevant requests sent by extensions you may have installed in Chrome. Extension requests have URLs that start with chrome-extension:// .

To hide extension requests, in the Filters action bar, select More filters > check_box Hide extension URLs .

The status bar at the bottom displays the number of the shown requests out of the total.

Show only the requests with blocked response cookies

To filter out everything except the requests with response cookies blocked for any reason, in the Filters action bar, select More filters > check_box Blocked response cookies .

The status bar at the bottom displays the number of the shown requests out of the total.

To find out the reason why a response cookie was blocked, select the request, open its Cookies tab, and hover over the info information icon.

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

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

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

The Requests table highlights blocked requests in red. The status bar at the bottom displays the number of the shown requests out of the total.

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

To filter out everything except the requests with origin that differs from page origin, in the Filters action bar, select More filters > check_box 3rd-party requests .

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

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

By default, the requests in the Requests table are sorted by initiation time, but you can sort the table using other criteria.

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

Click the header of any column in the Requests table to sort requests by that column.

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

  • Parser . HTML-парсер Chrome.
  • Перенаправление . HTTP-перенаправление.
  • Скрипт . Функция JavaScript. В данном случае панель «Сеть» предоставляет ссылку на соответствующую строку в исходном файле.
  • Другое . Какой-либо другой процесс или действие, например, переход на страницу по ссылке или ввод 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, откройте «Настройки». В панели «Сеть» установите флажок « Группировать по фрейму» .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. В таблице «Запросы» выберите запрос в столбце «Имя» .
2. Open the Headers tab and scroll down to General , Response Headers , Request Headers , and, optionally, Early Hints Headers sections.

In the General section, DevTools shows you human-readable status message next to the received HTTP status code.

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

Просмотреть исходный код HTTP-заголовка

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

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

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

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

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

• The network resource isn't valid. For example, execute fetch("https://jec.fish.com/unknown-url/") in the Console .

DevTools can also display only provisional headers due to security reasons.

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

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

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

By default, DevTools shows the payload in a human-readable form.

To view the sources of query string parameters and form data, on the Payload tab, click view source next to the Query String Parameters or Form Data sections.

View URL-decoded arguments of query string parameters

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

Просмотреть файлы cookie

To view the cookies sent in a request's HTTP header:

1. Select a request under the Name column in the Requests table.
2. Откройте вкладку «Cookies» .

For a description of each of the columns, see Fields .

To modify cookies, see View, edit, and delete cookies .

Просмотр сеансов, привязанных к устройству

The Device bound sessions tab shows the deferral (refresh) information associated with the selected request for all active device bound sessions on a site.

Для просмотра информации об отсрочке (обновлении):

1. Select a request under the Name column in the Requests table.
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. Select a request under the Name column in the Requests table.
2. Откройте вкладку «Время» .

See Preview a timing breakdown for a faster way to access this data.

See Timing breakdown phases explained for more information about each of the phases that you may see in the Timing tab.

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

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

See View the timing breakdown of a request for a way to access this data that does not require hovering.

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

Here's more information about each of the phases you may see in the Timing tab:

• Queueing . The browser queues requests before connection start and when:
  • Существуют запросы с более высоким приоритетом. Приоритет запроса определяется такими факторами, как тип ресурса, а также его местоположение в документе. Для получения дополнительной информации ознакомьтесь с разделом «Приоритет ресурсов» в руководстве fetchpriority .
  • There are already six TCP connections open for this origin, which is the limit. (Applies to HTTP/1.0 and HTTP/1.1 only.)
  • The browser is briefly allocating space in the disk cache.
• Зависание . Запрос может быть приостановлен после установления соединения по любой из причин, описанных в разделе «Очередь» .
• DNS Lookup . The browser is resolving the request's IP address.
• Initial connection . The browser is establishing a connection, including TCP handshakes or retries and negotiating an SSL.
• Proxy negotiation . The browser is negotiating the request with a proxy server .
• Запрос отправлен . Запрос отправляется.
• Подготовка ServiceWorker . Браузер запускает ServiceWorker.
• Request to ServiceWorker . The request is being sent to the service worker.
• Ожидание (TTFB) . Браузер ожидает первый байт ответа. TTFB расшифровывается как Time To First Byte (время до первого байта). Это время включает в себя задержку в один цикл передачи данных и время, затраченное сервером на подготовку ответа.
• Загрузка контента . Браузер получает ответ либо напрямую из сети, либо от сервис-воркера. Это значение показывает общее время, затраченное на чтение тела ответа. Значения, превышающие ожидаемые, могут указывать на медленную сеть или на то, что браузер занят выполнением другой работы, которая задерживает чтение ответа.

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

To view the initiators and dependencies of a request, hold Shift and hover over the request in the Requests table. DevTools colors initiators green, and dependencies red.

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

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

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

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

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

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

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

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

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

See View the uncompressed size of a resource to see how large resources are after the browser uncompresses them.

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

Когда оператор 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-данные, включая конфиденциальную информацию.

To copy a filtered set of requests, apply a filter to the network log, right-click a request, and select:

• Copy all listed URLs . Copy URLs of all filtered requests to the clipboard.
• Copy all listed as cURL . Copy all filtered requests as a chain of cURL commands.
• Copy all listed as PowerShell . Copy all filtered requests as a chain of PowerShell commands.
• Copy all listed as fetch . Copy all filtered requests as a chain of fetch calls.
• Copy all listed as fetch (Node.js) . Copy all filtered requests as a chain of Node.js fetch calls.
• Copy all listed as HAR (sanitized) . Copy all filtered requests as HAR data without sensitive data such as Cookie , Set-Cookie , and Authorization headers.
• Copy all listed as HAR (with sensitive data) . Copy all filtered requests as HAR data with sensitive data.

Change the layout of the Network panel

Expand or collapse sections of the Network panel UI to focus on what's important to you.

Hide the Filters action bar

By default, DevTools shows the Filters bar at the top of the Network panel. Click filter_alt Filter to hide it.

Use big request rows

Use big rows when you want more whitespace in your network requests table. Some columns also provide a little more information when using big rows. For example, the bottom value of the Size column is the uncompressed size of a request and the Priority column shows both the initial (bottom value) and final (top value) fetch priority.

Откройте настройки and click Big request rows to see big rows.

Hide the Overview track

By default, DevTools shows the Overview track. Open Settings and clear the Show overview checkbox to hide it.